public
Last active

  • Download Gist
_base-10-rem.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 30 31 32 33 34 35 36 37 38 39 40 41
//
// Using a browser default of 16 pixel font, this allows for the use of base-10 rem values.
// '$px-fallback' can be true or false.
// '$default-size' should be changed to match your default font size (PIXEL VALUE - 16px is most common browser default).
//
 
$base-font-size:16px;
 
html {
font-size:$base-font-size;
}
 
@mixin base-10-rem($property, $values...) {
$default-size:16px !default;
$px-fallback:true !default;
$length:length($values);
$base-value:10px;
$px-values:"";
$rem-values:"";
 
@if $px-fallback == true {
@for $i from 1 through $length {
$tmp:$base-value * nth($values, $i);
$px-values:#{$px-values + $tmp};
@if $i < $length {
$px-values:#{$px-values + " "};
}
}
}
 
@for $i from 1 through $length {
$tmp:($base-value / $base-font-size) * nth($values, $i);
$rem-values:#{$rem-values + $tmp}rem;
@if $i < $length {
$rem-values:#{$rem-values + " "};
}
}
 
#{$property}:$px-values;
#{$property}:$rem-values;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.