-
-
Save williammei/75f67e80d517cd26e53acb6ce4b0ec31 to your computer and use it in GitHub Desktop.
The ultimate SASS - PX to REM mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Create REM values with PX fall back | |
// | |
// Generate a REM with PX fallback from | |
// $baseFontSize. Enter the desired size based | |
// on pixels in numerical form. Supports shorthand. | |
// | |
// Forked from: http://codepen.io/thejameskyle/pen/JmBjc | |
// | |
// @author Greg Rickaby | |
// @since 1.0 | |
// | |
// Usage: @include rem($property, $values); | |
// Example Usage: | |
// @include rem(font-size, 16px); | |
// @include rem(margin, 0 24px 0 12px); | |
// | |
// Outputs: | |
// font-size: 16px; | |
// font-size: 1.6rem; | |
// margin: 0 24px 0 12px; | |
// margin: 0 2.4rem 0 1.2rem; | |
// ---------------------------------- | |
$baseFontSize: 10; // Based on HTML reset html { font-size: 62.5%; } | |
@function parseInt($n) { | |
@return $n / ($n * 0 + 1); | |
} | |
@mixin rem($property, $values) { | |
$px : (); | |
$rem: (); | |
$root: $baseFontSize; | |
@each $value in $values { | |
@if $value == 0 or $value == auto { | |
$px : append($px , $value); | |
$rem: append($rem, $value); | |
} | |
@else if type-of($value) == number { | |
$unit: unit($value); | |
$val: parseInt($value); | |
@if $unit == "px" { | |
$px : append($px, $value); | |
$rem: append($rem, ($val / $root + rem)); | |
} | |
@if $unit == "rem" { | |
$px : append($px, ($val * $root + px)); | |
$rem: append($rem, $value); | |
} | |
} | |
@else { | |
$px : append($px, $value); | |
$rem: append($rem, $value); | |
} | |
} | |
@if $px == $rem { | |
#{$property}: $px; | |
} @else { | |
#{$property}: $px; | |
#{$property}: $rem; | |
} | |
} | |
@function rem($value) { | |
$root: $baseFontSize; | |
$val: parseInt($value); | |
$return: (); | |
@if unit($value) == "px" { | |
$return: append($return, ($val / $root + rem)); | |
} @else { | |
$return: append($return, ($val * $root + px)); | |
} | |
@return $return; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment