Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
//
// base-10-rem
// Using a browser default of 16 pixel font, this allows for the use of base-10 rem values.
// '$px-fallback' can be true or false.
// '$base-font-size' must match your default font size (by default, the vast majority of browsers are 16px).
//
// Usage: @include base-10-rem(padding, 1, 2, 1, 3, !important);
//
html {
font-size: 16px;
}
@mixin base-10-rem($property, $values...) {
$base-font-size: 16px !default;
$length: length($values);
$base-value: 10px;
$px-values: "";
$rem-values: "";
@for $i from 1 through $length {
@if nth($values, $i) != !important {
@if type-of(nth($values, $i)) == "number" {
$px-tmp: $base-value * nth($values, $i);
$rem-scale: $base-font-size / 16px;
$rem-tmp: $rem-scale * $base-value / $base-font-size * nth($values, $i);
$px-values: #{$px-values + $px-tmp};
$rem-values: #{$rem-values + $rem-tmp}rem;
}
@else {
$px-values: #{$px-values + nth($values, $i)};
$rem-values: #{$rem-values + nth($values, $i)};
}
@if $i < $length {
$px-values: #{$px-values + " "};
$rem-values: #{$rem-values + " "};
}
}
@else {
$px-values: #{$px-values + !important};
$rem-values: #{$rem-values + !important};
}
}
@if $rem-fallback == true {
#{$property}: $px-values;
}
@else {
#{$property}: $rem-values;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.