« Back to Index

Sass REM

View original Gist on GitHub

example.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// Transform a value into rem
// Assuming baseline is set to 10px on :root/html
@function rem($value, $baseline: 10px) {
    @if $value == 0 { @return 0; } // 0rem -> 0
    @if type-of($value) == list {
        $result: ();
        @each $e in $value {
            $result: append($result, rem($e));
        }
        @return $result;
    } @else {
        @return if(type-of($value) == number and unit($value) == px, $value / $baseline * 1rem, $value);
    }
}

// Output rem units with px fallback
// Expects $properties to be a Sass map
@mixin rem($properties) {
    @each $property, $value in $properties {
        @if (type-of($value) == number and $value != 0) {
            // Turn any value into pixels
            $value: if(unitless($value), $value * 1px, $value);
        }

        #{$property}: $value;
        #{$property}: rem($value);
    }
}

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

font-mixin.scss

// Transform a value into rem
// Assuming baseline is set to 10px on :root/html
@function rem($value, $baseline: 10px) {
    @if type-of($value) == list {
        $result: ();
        @each $e in $value {
            $result: append($result, rem($e));
        }
        @return $result;
    } @else {
        @if $value == 0 { @return 0; } // 0px => 0
        @return if(unit($value) == px, $value / $baseline * 1rem, $value);
    }
}

// Output rem units with px fallback
// Expects $properties to be a Sass map
// Usage: see font-size mixin below
// or http://sassmeister.com/gist/7451284
@mixin rem($properties) {
    @each $property, $value in $properties {
        @if (type-of($value) == number and $value != 0) {
            // Turn any value into pixels
            $value: if(unitless($value), $value * 1px, $value);
        }

        #{$property}: $value;
        #{$property}: rem($value);
    }
}

@mixin font-size($size, $line-height: $size) {
    @include rem((
        font-size: $size,
        line-height: $line-height
    ));
}

@mixin font($family, $weight, $size, $line-height: $size) {
    font-family: $family;
    font-weight: $weight;
    @include font-size($size, $line-height);
}