Skip to content

Instantly share code, notes, and snippets.

@mrdanadams
Created January 30, 2012 15:11
Show Gist options
  • Save mrdanadams/1704895 to your computer and use it in GitHub Desktop.
Save mrdanadams/1704895 to your computer and use it in GitHub Desktop.
scale Sass mixin to convert pixels to EMs
@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 }
}
/* 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