Hugo Giraudel has written a very good ultimate rem mixin for Sass.
I use Sass indented syntax and have written my own alternative mixin, which I think may be a little more compact.
I don’t have time to go through it line by line now, but those who like it will know why, and y’all are welcome to use it!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@mixin rem($property, $values, $baseFontSize: 10) $px: () $rem: () @each $value in $values @if $value == 0 or $value == auto $px: append($px, $value) $rem: append($rem, $value) @else $val: $value/($value*0+1) $unit: unit($value) @if unitless($value) or $unit == rem $px: append($px, $val*$baseFontSize+px) $rem: append($rem, $val+rem) @else if $unit == px $px: append($px, $value) $rem: append($rem, $val/$baseFontSize+rem) @else $px: append($px, $value) $rem: append($rem, $value) #{$property}: $px @if $rem != $px #{$property}: $rem |
If I refine this further in the future I’ll update the code.
Discover more from Gavin Orland
Subscribe to get the latest posts sent to your email.
Comment: