Created
April 8, 2014 19:07
-
-
Save wfendler/10172774 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.4) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
// Assumptions | |
$base-font-size: 12px; // mobile | |
$base-font-size--large: 16px; // desktop | |
$line-height-ratio: 1.5; | |
$legacy-ie: false; // separate ie.scss stylesheet sets this to true | |
@mixin rem($property, $rem_values, $fallback: false) { | |
// LEGACY IE PX FALLBACK CALCULATION | |
// based off of "desktop" font size | |
@if $legacy-ie == true { | |
// If there's only one numeric value: | |
@if type-of($rem_values) == 'number' { | |
// if it's zero, no calculation or unit necessary | |
@if $rem_values == 0 { | |
#{$property}: $rem-values; | |
} @else { | |
#{$property}: $rem-values * $base-font-size--large; | |
} | |
} | |
// If there is more than one value, create a list and perform equations on each value | |
@else { | |
// Create an empty list that we can dump values into | |
$px_values: (); | |
@each $value in $rem_values { | |
// if it's zero, no calculation or unit necessary | |
@if $value == 0 { | |
$px_values: append($px_values, $value); | |
} @else { | |
$px_values: append($px_values, ($value * $base-font-size--large)); | |
} | |
} | |
// Return the property and its list of converted values | |
#{$property}: $px_values; | |
} | |
} | |
@else { | |
// $fallback accepts a px value that tells it what to | |
// use to measure for the fallback | |
@if $fallback != false { | |
// Create an empty list that we can dump values into | |
$px_values: (); | |
@each $value in $rem_values { | |
// if it's zero, no calculation or unit necessary | |
@if $value == 0 { | |
$px_values: append($px_values, $value); | |
} @else { | |
$px_values: append($px_values, ($value * $fallback)); | |
} | |
} | |
// Return the property and its list of converted values | |
#{$property}: $px_values; | |
} | |
$rem_values_with_unit: (); | |
@each $value in $rem_values { | |
@if $value == 0 { | |
$rem_values_with_unit: append($rem_values_with_unit, $value); | |
} @else { | |
$rem_values_with_unit: append($rem_values_with_unit, $value + rem); | |
} | |
} | |
#{$property}: $rem_values_with_unit; | |
} | |
} | |
.heading { | |
@include rem(margin-bottom, 1 0, $base-font-size); | |
} |
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
.heading { | |
margin-bottom: 12px 0; | |
margin-bottom: 1rem 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment