Created
March 4, 2014 08:24
-
-
Save maddesigns/9342353 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
// ---- | |
// Sass (v3.3.0.rc.5) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
// @mixin x-rem() | |
// | |
// mixin for easy use of rem with px as fallback | |
// usage: @include x-rem(14px); | |
// usage: @include x-rem(14px, font-size); | |
// usage: @include x-rem(0 12px 2 1.2, margin); | |
// usage: @include x-rem(1.5 24px, padding); | |
// | |
// thanks to Eric Meyer for https://github.com/ericam/susy | |
// and Hans Christian Reinl for http://drublic.de/blog/rem-fallback-sass-less/ | |
// | |
@mixin x-rem($values: $base-fontsize, $property: 'font-size', $base: $base-fontsize) { | |
// Create a couple of empty lists as output buffers. | |
$px-values: (); | |
$rem-values: (); | |
// Loop through the $values list | |
@each $value in $values { | |
// For each property value, if it's in rem or px, derive both rem and | |
// px values for it and add those to the end of the appropriate buffer. | |
// Ensure all pixel values are rounded to the nearest pixel. | |
@if $value == 0 or $value == 0px { | |
// 0 -- use it without a unit | |
$px-values: join($px-values, 0); | |
$rem-values: join($rem-values, 0); | |
} @else if type-of($value) == number and not unitless($value) and (unit($value) == px) { | |
// px value given - calculate rem value from base-font-size | |
$new-rem-value: $value / $base; | |
$px-values: join($px-values, round($value)); | |
$rem-values: join($rem-values, #{$new-rem-value}rem); | |
} @else if type-of($value) == number and not unitless($value) and (unit($value) == "%") { | |
// % value given - don't add px or rem | |
$px-values: join($px-values, #{$value}); | |
$rem-values: join($rem-values, #{$value}); | |
} @else if $value == auto { | |
// auto - don't add px or rem | |
$px-values: join($px-values, auto); | |
$rem-values: join($rem-values, auto); | |
} @else { | |
// unitless value - use those directly as rem and calculate the px-fallback | |
$px-values: join($px-values, round($value * $base)); | |
$rem-values: join($rem-values, #{$value}rem); | |
} | |
} | |
// output the converted rules | |
#{$property}: $px-values; | |
#{$property}: $rem-values; | |
} | |
$base-fontsize: 16px; | |
.sample { | |
@include x-rem(14px); | |
@include x-rem(0 12px 2 1.2, margin); | |
@include x-rem(1.5 24px, padding); | |
} |
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
.sample { | |
font-size: 14px; | |
font-size: 0.875rem; | |
margin: 0 12px 32px 19px; | |
margin: 0 0.75rem 2rem 1.2rem; | |
padding: 24px 24px; | |
padding: 1.5rem 1.5rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment