Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist
View _base-10-rem.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
//
// 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.