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.3)
// Compass (v1.0.0.alpha.18)
// ----
$guss-rem-baseline: 10px !default;
// Transform a value into rem
// Assuming baseline is set to 10px on :root/html
@function rem($value, $baseline: $guss-rem-baseline) {
@if $value == 0 { @return 0; } // 0rem -> 0
@if type-of($value) == list {
$result: ();
@each $e in $value {
$result: append($result, rem($e));
}
@return $result;
} @else {
@return if(type-of($value) == number and unit($value) == px, $value / $baseline * 1rem, $value);
}
}
// Output rem units with px fallback
// Expects $properties to be a Sass map
@mixin rem($properties) {
@each $property, $value in $properties {
@if (type-of($value) == number and $value != 0) {
// Turn any value into pixels
$value: if(unitless($value), $value * 1px, $value);
}
#{$property}: $value;
#{$property}: rem($value);
}
}
.test {
@include rem((
padding: 20px 0 0px 3vh,
margin: 0 auto 20px,
width: 300px,
height: 350px,
line-height: 20px,
border-right: 1px solid white !important
));
}
.test {
padding: 20px 0 0px 3vh;
padding: 2rem 0 0 3vh;
margin: 0 auto 20px;
margin: 0 auto 2rem;
width: 300px;
width: 30rem;
height: 350px;
height: 35rem;
line-height: 20px;
line-height: 2rem;
border-right: 1px solid white !important;
border-right: 0.1rem solid white !important;
}
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.