Skip to content

Instantly share code, notes, and snippets.

@avclark avclark/Rem Mixin
Created Dec 4, 2013

Embed
What would you like to do?
@mixin rem( $property, $a:0, $b:$a, $c:$a, $d:$b ) {
@if ( $property == "font-size" ) {
// $a is the font size
// %b is the keyword
@if ( $a != $b ) {
font-size: $b;
}
@else {
font-size: $a * $base-font-multiplier * 16px;
}
font-size: $a * 1rem;
} @else {
$apx: $a * $base-font-multiplier * 16px;
$bpx: $b * $base-font-multiplier * 16px;
$cpx: $c * $base-font-multiplier * 16px;
$dpx: $d * $base-font-multiplier * 16px;
$arem: $a * 1rem;
$brem: $b * 1rem;
$crem: $c * 1rem;
$drem: $d * 1rem;
@if ( $property == "padding" or $property == "margin" ){
#{$property}: $apx $bpx $cpx $dpx;
#{$property}: $arem $brem $crem $drem;
} @else {
#{$property}: $apx;
#{$property}: $arem;
}
}
}
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.