Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Generated by
// ----
// 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;
Copy link

jakob-e commented Nov 17, 2013

Hi Chris,

I've added a set of unit conversion functions here - feel free to use and comment :)

Jakob E

Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment