-
-
Save arielsalminen/2157072 to your computer and use it in GitHub Desktop.
scale Sass mixin to convert pixels to EMs
This file contains 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
@mixin scale($props, $sizes, $base: 16) { | |
$values: (); | |
$sublists: false; | |
@each $s in $sizes { | |
/* unwrap lists for values that have multiple list of values such as text-shadow */ | |
@if type-of($s) == list { | |
$sublists: true; | |
$vv: (); | |
@each $ss in $s { | |
$vv: append($vv, if(type-of($ss) == number, #{$ss / $base}em, $ss)); | |
} | |
$values: append($values, join((), $vv)); | |
} @else { | |
$values: append($values, if(type-of($s) == number, #{$s / $base}em, $s)); | |
/*$values: append($values, #{$s}px); */ | |
} | |
} | |
$value: join((), $values, if($sublists, comma, space)); | |
@each $prop in $props { #{$prop}: $value } | |
} |
This file contains 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
/* the simplest version */ | |
@include scale(line-height, 30) | |
/* overrides the default 16px with a different base font size */ | |
@include scale(line-height, 30, 25) | |
/* short-hand specifying 2 properties with the same value */ | |
@include scale(width height, 125); | |
/* a property taking multiple values. output: padding: 0em 1.5625em; */ | |
@include scale(padding, 0 25, 16); | |
/* A property allowing non-size values (passed through unchanged) accepting multiple properties | |
output: text-shadow: #0d6e28 0.0625em 0.0625em, #777 0em 0em 0.125em; | |
*/ | |
@include scale(text-shadow, (#0d6e28 1 1) (#777 0 0 2), 16); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment