Created
September 4, 2013 00:00
-
-
Save TerasawaShuhei/6431178 to your computer and use it in GitHub Desktop.
rem pixel-fallback
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
$root-font-size: 15 !default; | |
// rem() | |
// Divides $input by $root-font-size and appends "rem" unit | |
// $input is processed via px() if it contains multiple values | |
// | |
// PARAMS: | |
// $input required | |
// | |
// EXAMPLES: | |
// rem(18) #=> 1.5rem | |
@function rem($input) { | |
$output: null; | |
@if type-of($input) == list { | |
$output: px($input, rem); | |
} @else { | |
$output: ($input / $root-font-size) + rem; | |
} | |
@return $output; | |
} | |
// em() | |
// Divides $input by the given base $font-size param and appends "em" unit | |
// $input is processed via px() if it contains multiple values | |
// | |
// PARAMS: | |
// $input required | |
// $font-size not required; defaults to value of $root-font-size | |
// | |
// EXAMPLES: | |
// em(18, 12) #=> 1.5em | |
// em(20) #=> 1.66667em | |
@function em($input, $font-size: $root-font-size) { | |
$output: null; | |
@if type-of($input) == list { | |
$output: px($input, em, $font-size); | |
} @else { | |
$output: ($input / $font-size) + em; | |
} | |
@return $output; | |
} | |
// px() | |
// Converts the unitless numerical values in a given SASS list to values in a given unit | |
// See the SASS_REFERENCE for a description and examples of the "list" data type: | |
// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists | |
// Accepts optional $font-size param (defaulting to $root-font-size) for "em" conversions | |
// | |
// PARAMS: | |
// $list required | |
// $unit not required; defaults to pixels ("px") | |
// $font-size not required; defaults to value of $root-font-size | |
// | |
// NOTES: | |
// CSS font shorthand (e.g., "bold 12/18 Helvetica, Arial, sans-serif") is not yet supported; | |
// see "Division and /": http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#division-and-slash | |
// | |
// EXAMPLES: | |
// See CSS rulesets below the function | |
@function px($list, $unit: px, $font-size: $root-font-size) { | |
$output: null; // declare $output; to return new concatenated list | |
@each $value in $list { // iterate through $list | |
@if type-of($value) == number { // skip strings | |
@if unitless($value) { // respect values already assigned units | |
@if $unit == rem { // rem conversions | |
$value: rem($value); | |
} @else if $unit == em { // em conversions | |
$value: em($value, $font-size); | |
} @else { // everything else avoids conversion | |
$value: $value + $unit; | |
} | |
} | |
} | |
$output: append($output, $value); // concatenate values | |
} | |
@return $output; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment