Skip to content

Instantly share code, notes, and snippets.

@Sphinxxxx
Created September 10, 2018 01:47
Show Gist options
  • Save Sphinxxxx/f404d1d0a08968d45f5d0ef29a79af7b to your computer and use it in GitHub Desktop.
Save Sphinxxxx/f404d1d0a08968d45f5d0ef29a79af7b to your computer and use it in GitHub Desktop.
SASS (SCSS) strip-unit() function
@function strip-unit($value, $newUnit: "") {
//https://www.sitepoint.com/understanding-sass-units/
$units: (
'px': 0px,
'cm': 0cm,
'mm': 0mm,
'%': 0%,
'ch': 0ch,
'in': 0in,
'em': 0em,
'rem': 0rem,
'pt': 0pt,
'pc': 0pc,
'ex': 0ex,
'vw': 0vw,
'vh': 0vh,
'vmin': 0vmin,
'vmax': 0vmax,
'deg': 0deg,
'turn': 0turn,
'rad': 0rad,
'grad': 0grad,
's': 0s,
'ms': 0ms,
'Hz': 0Hz,
'kHz': 0kHz,
'dppx': 0dppx,
'dpcm': 0dpcm,
'dpi': 0dpi,
);
//https://css-tricks.com/snippets/sass/strip-unit-function/
$number: $value / ($value * 0 + 1);
@if ($newUnit == "") {
@return $number;
}
@if map-has-key($units, $newUnit) {
@return map-get($units, $newUnit) + $number;
}
@error "Unknown unit `#{$newUnit}`.";
}
/* Test */
$value: 4Hz;
div {
val: $value;
transition-duration: 0kHz + $value/3;
test1: strip-unit(1/$value, 's')/2;
test2: strip-unit(1/$value)/2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment