public
Last active

rem mixin Sass

  • Download Gist
rem_mixin.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
// 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: 16px;
@mixin rem($property, $px-values) {
// Convert the baseline into rems
$baseline-rem: $baseline-px / 1rem;
// Print the first line in pixel values
#{$property}: $px-values;
// If there is only one (numeric) value, return the property/value line for it.
@if type-of($px-values) == "number" {
#{$property}: $px-values / $baseline-rem; }
@else {
// Create an empty list that we can dump values into
$rem-values: unquote("");
@each $value in $px-values {
// If the value is zero, return 0
@if $value == 0 {
$rem-values: append($rem-values, $value); }
@else {
$rem-values: append($rem-values, $value / $baseline-rem); } }
// Return the property and its list of converted values
#{$property}: $rem-values; } }
// Usage:
// .element {
// @include rem('padding',10px 0 2px 5px);
// }

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.