Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$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
You can’t perform that action at this time.