-
-
Save esedic/10950f3604a4d1a98cc0be34360e8ce2 to your computer and use it in GitHub Desktop.
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
// VALUE UNIT STRIPPING AND CONVERSION FUNCTION TOOLS | |
// By Nicolas Giethlen (aka Chmood) | |
// VARIABLES | |
$browser-fontsize-base: 16 !default; // Default browser font-size in px (unitless) | |
$pixels-per-rem: 10 !default; // Root font-size in px (unitless) | |
// FUNCTIONS | |
// STRIP-UNIT | |
// Remove the unit of a length | |
// @param {Number} $number - Number to remove unit from | |
// @return {Number} - Unitless number | |
// See: https://css-tricks.com/snippets/sass/strip-unit-function/ | |
@function strip-unit($number) { | |
@if type-of($number) == 'number' and not unitless($number) { | |
@return $number / ($number * 0 + 1); | |
} | |
@return $number; | |
} | |
// UNITS CONVERSION | |
// These functions inputs can be with or without units | |
// They return values WITH unit (use strip-unit() if needed) | |
// Adapted from: https://css-tricks.com/snippets/sass/px-to-em-functions/ | |
// PX2EM | |
// Converts pixels to em's | |
@function px2em($pixels, $context: $browser-fontsize-base) { | |
$pixels: strip-unit($pixels); | |
$context: strip-unit($context); | |
@return $pixels / $context * 1em; | |
} | |
// EM2PX | |
// Converts em's to pixels | |
@function em2px($ems, $context: $browser-fontsize-base) { | |
$ems: strip-unit($ems); | |
$context: strip-unit($context); | |
@return $ems * $context * 1px; | |
} | |
// EM2REM | |
// Converts em's to rem's | |
@function em2rem($ems, $context: $browser-fontsize-base, $context-rem: $pixels-per-rem) { | |
$ems: strip-unit($ems); | |
$context: strip-unit($context); | |
$context-rem: strip-unit($context-rem); | |
@return $ems * $context / $context-rem * 1rem; | |
} | |
// REM2EM | |
// Converts rem's to em's | |
@function rem2em($rems, $context: $browser-fontsize-base, $context-rem: $pixels-per-rem) { | |
$rems: strip-unit($rems); | |
$context: strip-unit($context); | |
$context-rem: strip-unit($context-rem); | |
@return $rems / $context * $context-rem * 1em; | |
} | |
// PX2REM | |
// Converts pixels to rem's | |
@function px2rem($pixels, $context-rem: $pixels-per-rem) { | |
$pixels: strip-unit($pixels); | |
$context-rem: strip-unit($context-rem); | |
@return $pixels / $context-rem * 1rem; | |
} | |
// REM2PX | |
// Converts rem's to pixels | |
@function rem2px($rems, $context-rem: $pixels-per-rem) { | |
$rems: strip-unit($rems); | |
$context-rem: strip-unit($context-rem); | |
@return $rems * $context-rem * 1px; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment