Skip to content

Instantly share code, notes, and snippets.

@xonic xonic/rem
Created Apr 18, 2014

Embed
What would you like to do?
A Sass unitless numbers mixin for rem values with automatic px fallback
// Mixin that allows to specify arbitrary CSS properties with
// unitless numbers. The output has rem unit with pixel fallback.
// Shorthand assignments are supported too!
$base_line: 10;
@mixin rem($property, $values, $important:"")
{
// Placeholder variables
$shorthand_px: "";
$shorthand_rem: "";
// Parameter $values might be a list of elements
@each $value in $values
{
// Current value is a valid number and greater than 0
@if $value != auto and $value != 0 and $value != inherit
{
// Add 'px' and 'rm' to the current value and store in
// placeholder variables
$shorthand_px: #{ $shorthand_px + " " + $value * $base_line + px };
$shorthand_rem: #{ $shorthand_rem + " " + $value + rem };
}
// Current value is 'auto' or 0
@else
{
// Add only 'auto' or 0 to the placeholder variables
$shorthand_px: #{ $shorthand_px + " " + $value };
$shorthand_rem: #{ $shorthand_rem + " " + $value };
}
}
@if $important == !important
{
$shorthand_px: #{ $shorthand_px + " !important" };
$shorthand_rem: #{ $shorthand_rem + " !important" };
}
// Output the CSS property in pixels and rems
#{$property}:$shorthand_px;
#{$property}:$shorthand_rem;
}
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.