Skip to content

Instantly share code, notes, and snippets.

@branneman
Last active December 24, 2015 07:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save branneman/6762906 to your computer and use it in GitHub Desktop.
Save branneman/6762906 to your computer and use it in GitHub Desktop.
Sass (scss) rem function and mixin. Based on and improved upon: https://github.com/bitmanic/rem
//
// Sass rem function and mixin
// https://gist.github.com/branneman/6762906
// Based on and improved upon https://github.com/bitmanic/rem
//
// Baseline, measured in pixels
// The value should be the same as the font-size value for the html element
// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
// then the variable below would be 10px.
$baseline-px: 10px;
// Generates the css property in px and also in rem when !$old-ie
@mixin rem($property, $px-values) {
#{$property}: $px-values;
@if not $old-ie {
#{$property}: rem($px-values);
}
}
// Returns the rem equivalent for the given px value(s)
@function rem($px-values) {
// Convert the baseline into rems
$baseline-rem: $baseline-px / 1rem * 1;
// If there is only one (numeric) value, return the property/value line for it.
@if type-of($px-values) == "number" {
@return $px-values / $baseline-rem;
} @else {
// Create an empty list that we can dump values into
$rem-values: ();
@each $value in $px-values {
// If the value is zero or not a number, return it
@if $value == 0 or type-of( $value ) != "number" {
$rem-values: append($rem-values, $value);
} @else {
$rem-values: append($rem-values, $value / $baseline-rem);
}
}
// Return the property and its list of converted values
@return $rem-values;
}
}
html {
font-size: 10px;
}
body {
@include rem(font-size, 18px);
}
li {
border-top: rem(1px) solid $linkblue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment