Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// Transform a value into rem
// Assuming baseline is set to 10px on :root/html
@function rem($value, $baseline: 10px) {
@if type-of($value) == list {
$result: ();
@each $e in $value {
$result: append($result, rem($e));
}
@return $result;
} @else {
@return if(unit($value) == px, $value / $baseline * 1rem, $value);
}
}
// Use rem units with px fallback
@mixin rem($properties) {
@each $property, $value in $properties {
#{$property}: $value;
#{$property}: rem($value);
}
}
.test {
@include rem((
padding: 20px,
width: 300px,
height: 350px,
line-height: 20px,
margin: 0 10px 3vh 0
));
}
.test {
padding: 20px;
padding: 2rem;
width: 300px;
width: 30rem;
height: 350px;
height: 35rem;
line-height: 20px;
line-height: 2rem;
margin: 0 10px 3vh 0;
margin: 0 1rem 3vh 0;
}
@jakob-e

This comment has been minimized.

Copy link

commented Nov 17, 2013

Hi Chris,

I've added a set of unit conversion functions here - feel free to use and comment :)
https://github.com/jakob-e/unitconversion/blob/master/UnitConversion.scss

Best,
Jakob E

@rvinay88

This comment has been minimized.

Copy link

commented Nov 19, 2013

Hi Chris,

Is there a possibility for us to add a check for 0 to be returned unit-less, when converting to rem
It is an edge case, that if someone supplies 0px or 0em to this, we can strip out the unit and return just 0.

https://gist.github.com/rvinay88/7551674

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.