Skip to content
This repository has been archived by the owner on Jun 14, 2022. It is now read-only.

guardian/guss-rem

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Guss Utilities: rem

Part of the Guss collection.

Requirements

  • Sass 3.3.0 or higher

Installation

bower install guss-rem --save
@import "path/to/_rem.scss";

Features

Use rem units in your CSS in a retro-compatible way.

  • rem() is a Sass function converts pixel values into their rem equivalents
  • rem(()) is a Sass mixin that takes a set of properties and outputs their equivalent in rem units with a fallback in pixels for older browsers.

Calculations are done assuming a 10px baseline on the :root element (ex: <html style="font-size: 62.5%">). You can adjust this baseline by changing the value of $guss-rem-baseline before importing this Sass partial.

Example

.test {
    @include rem((
        padding: 20px 0 0px 3vh,
        margin: 0 auto 20px,
        width: 300px,
        height: 350px,
        line-height: 20px
    ));
    height: rem(20px);
}

Outputs:

.test {
  padding: 20px 0 0px 3vh;
  padding: 2rem 0 0 3vh;
  margin: 0 auto 20px;
  margin: 0 auto 2rem;
  width: 300px;
  width: 30rem;
  height: 350px;
  height: 35rem;
  line-height: 20px;
  line-height: 2rem;
  height: 2rem;
}

Contribute

Install the test dependencies:

$ bower install

Run the tests (specs are located in specs/rem.scss):

$ sass tests.scss -I './bower_components/bootcamp/dist'

Make sure tests pass before you commit any changes.

About

Use rem units in your CSS with a pixel fallback for older browsers

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages