Created
July 5, 2019 18:45
-
-
Save wschenkel/45a6f175ac92c1467624b59b738db14e to your computer and use it in GitHub Desktop.
Units to use in your scss files.
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
$global-font-size: 100% !default; | |
/// Converts one or more pixel values into matching rem values. | |
/// | |
/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses. | |
/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base. | |
/// | |
/// @returns {List} A list of converted values. | |
@function rem-calc($values, $base: null) { | |
$rem-values: (); | |
$count: length($values); | |
// If no base is defined, defer to the global font size | |
@if $base == null { | |
$base: $global-font-size; | |
} | |
// If the base font size is a %, then multiply it by 16px | |
// This is because 100% font size = 16px in most all browsers | |
@if unit($base) == '%' { | |
$base: ($base / 100%) * 16px; | |
} | |
// Using rem as base allows correct scaling | |
@if unit($base) == 'rem' { | |
$base: strip-unit($base) * 16px; | |
} | |
@if $count == 1 { | |
@return to-rem($values, $base); | |
} | |
@for $i from 1 through $count { | |
$rem-values: append($rem-values, to-rem(nth($values, $i), $base)); | |
} | |
@return $rem-values; | |
} | |
@function to-rem ($value, $base: null) { | |
// Check if the value is a number | |
@if type-of($value) != 'number' { | |
@warn inspect($value) + ' was passed to rem-calc(), which is not a number.'; | |
@return $value; | |
} | |
// Calculate rem if units for $value is not rem | |
@if unit($value) != 'rem' { | |
$value: strip-unit($value) / strip-unit($base) * 1rem; | |
} | |
// Turn 0rem into 0 | |
@if $value == 0rem { | |
$value: 0; | |
} | |
@return $value; | |
} | |
@function strip-unit($number) { | |
@if type-of($number) == 'number' and not unitless($number) { | |
@return $number / ($number * 0 + 1); | |
} | |
@return $number; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment