Created
April 16, 2014 19:52
-
-
Save athaeryn/10926099 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.5) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
$base-font-size: 16px; | |
// Helper Functions | |
// map | |
// Applies the function to each argument in the given list. | |
@function map($func, $list, $args...) { | |
$new-list: (); | |
@each $item in $list { | |
$new-list: append($new-list, call($func, $item, $args...)); | |
} | |
@return $new-list; | |
} | |
// multiply | |
// Multiplies a and b, if a is a number. | |
@function multiply($a, $b) { | |
@if type-of($a) == 'number' { | |
@return $a * $b; | |
} | |
@else { | |
@return $a; | |
} | |
} | |
// add_unit | |
// Adds the unit to the value, if the value is a number. | |
@function add_unit($value, $unit) { | |
@if type-of($value) == 'number' { | |
@return $value + $unit; | |
} | |
@else { | |
@return $value; | |
} | |
} | |
@mixin rem($property, $rem_values, $fallback: false) { | |
@if $legacy-ie == false { | |
// Pixel fallbacks. | |
// $fallback should be $base-font-size or $base-font-size--mobile. | |
@if $fallback != false { | |
#{$property}: map(multiply, $rem_values, $fallback); | |
} | |
#{$property}: map(add_unit, $rem_values, rem) | |
} | |
// Calculate pixel values for legacy browsers that don't support rems. | |
@else { | |
#{$property}: map(multiply, $rem_values, $base-font-size); | |
} | |
} | |
/* $legacy-ie: false; */ | |
$legacy-ie: false; | |
div { | |
@include rem(margin, 10 auto); | |
@include rem(padding, 1 2 3 4); | |
} | |
/* | |
$legacy-ie: false; | |
$fallback: $base-font-size; | |
*/ | |
$legacy-ie: false; | |
$_fallback: $base-font-size; | |
div { | |
@include rem(margin, 1.6, $_fallback); | |
@include rem(padding, 1 2 3 4, $_fallback); | |
} | |
/* $legacy-ie: true; */ | |
$legacy-ie: true; | |
div { | |
@include rem(margin, 10); | |
@include rem(padding, 1 auto 3 4); | |
} |
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
/* $legacy-ie: false; */ | |
div { | |
margin: 10rem auto; | |
padding: 1rem 2rem 3rem 4rem; | |
} | |
/* | |
$legacy-ie: false; | |
$fallback: $base-font-size; | |
*/ | |
div { | |
margin: 25.6px; | |
margin: 1.6rem; | |
padding: 16px 32px 48px 64px; | |
padding: 1rem 2rem 3rem 4rem; | |
} | |
/* $legacy-ie: true; */ | |
div { | |
margin: 160px; | |
padding: 16px auto 48px 64px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment