Last active
December 17, 2015 17:19
-
-
Save jeffkamo/5645052 to your computer and use it in GitHub Desktop.
A SASS Mixin (written in SCSS) for converting pixels to rems.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// rem (Mixin) | |
// ----------- | |
// | |
// Return font-size with a rem value based on the desired pixel value, as well | |
// as a fallback font-size value in em units (for IE8). | |
// | |
// Usage | |
// | |
// h1 { | |
// @include rem(font-size, 25, $fallback: false); | |
// } | |
// | |
// Parameters | |
// | |
// $property: (property name) The desired property to apply the $value. | |
// $value: (int, optional) The target pixel value to be achieved | |
// as rems. Defaults to $text. | |
// $divisor: (int, optional) Usually represents the root font-size | |
// but is also the unit by which `$value` is divided to | |
// calculate the final result. Typically this value is | |
// only changed if your root font-size is something other | |
// than the 16px. Defaults to 16. | |
// $fallback: (boolean, optional) Declare whether you wish the pixel | |
// versions of the $property are compiled. Defaults | |
// to False. | |
@mixin rem($property, $value: $text, $divisor: 16, $fallback: true) { | |
@if type-of($property) == 'number' { | |
@warn '$property value must be set'; | |
} | |
#{$property}: $value * 1px; | |
#{$property}: ($value / $divisor) * 1rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment