public
Last active

Fallback rem-mixin in Sass and LESS

  • Download Gist
rem-fallback.less
Less
1 2 3 4 5 6 7 8 9 10 11 12 13
@main-font-size: 16px;
 
.x-rem (@property, @value) {
 
// This is a workaround, inspired by https://github.com/borodean/less-properties
@px-fallback: @value * @main-font-size;
-: ~`(function () { return ';@{property}: @{px-fallback}'; }())`;
-: ~`(function () { return ';@{property}: @{value}rem'; }())`;
}
 
.some-class {
.x-rem(font-size, 1.4);
}
rem-fallback.scss
SCSS
1 2 3 4 5 6 7 8 9 10
$main-font-size: 16px;
 
@mixin x-rem ($property, $value) {
#{$property}: $value * $main-font-size;
#{$property}: #{$value}rem;
}
 
.some-class {
@include x-rem(font-size, 1.4);
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.