Skip to content

Instantly share code, notes, and snippets.

@JustJenFelice
Created October 18, 2013 06:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JustJenFelice/7037346 to your computer and use it in GitHub Desktop.
Save JustJenFelice/7037346 to your computer and use it in GitHub Desktop.
$base-font-size:16px;
@mixin base-10-rem($property, $values...) {
$length:length($values);
$base-value:10px;
$px-values:"";
$rem-values:"";
@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;
}
// Usage
div {
@include base-10-rem(margin, 0, 0, 1.5, 0);
@include base-10-rem(padding, 2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment