Use rem units in your CSS with a pixel fallback for older browsers
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
specs
.gitignore
LICENSE
README.md
_rem.scss
bower.json
sache.json
tests.scss

README.md

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.