There is a lot of confusion around the way units work in Sass. Yet, they work exactly as they do in real life. If you want to remove the unit of value, you have to divide it by 1 unit. For instance, to remove the cm unit of 42cm, you have to divide it by 1cm. It works exactly the same in Sass.
$length: 42px;
$value: $length / 1px;
// -> 42But what if you don’t know the unit in use? Let’s say it could be anything, from pixels to em or even vw and ch. Then we need to abstract the logic in a function:
/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}The calculation might look odd but it actually makes sense. In order to have 1 of the unit of $number, we can multiply $number by 0 and then add 1.
Usage
$length: 42px;
$value: strip-unit($length);
// -> 42
To what exactly, we can use this function. I can’t think of something specific, because until now sass calculates at least same unit value operations. It’s obvious, there are possible, not same unit operations. But if you may, give us an example, please!
Agreed, use-cases are quite uncommon. One that has been suggested to me by Reda Lemeden (Bourbon, Neat, …):
Most of the time, it is possible to work around the issue by manipulating units the right way.
Unitless line-height calculations is a specific example if you find yourself with a variable set with a unit…
I am currently developing a proprietary framework for our company and I’ve hit a major snag while dealing with ‘rem’ units. As you can see at http://caniuse.com/#feat=rem, Internet Explorer (even up to version 11) does not support rem units in a number of cases and, after experimenting, I’ve come to realize that it is, in practice, much worse than they make it look. I have actual font-sizes gone haywire and disabled margins/paddings etc, just to name a few.
The solution on this page allowed me to produce a sass mixin that makes my rem units fool-proof. All I had to do is get an actual $unit variable at the beginning that I can multiply the result with.
http://codepen.io/anon/pen/vNJMLY
As you can see, both values are presented to the browser in order of the least desirable. I think the OP’s article actually helps dealing with these backwards compatibility issues. Or maybe it’s just me.
The drawback in my specific case (but then I guess it’s the same with every polyfill) is that it sorts of defeats the purpose of having rem units in the first place… The simplest solution ends up being a mixin to multiply the root unit with any value, thus completely replacing rem’s function.
I hate you so much right now Internet Explorer and your still meaningful segment of the browser market.
1232
A use case is if you want to write your own functions that need to do math with a provided percentage. You can’t do anything with a percentage number so you have to remove the percentage. Sass treats it as a “unit” which needs to be removed. Don’t forget to divide the unitless percentage value by 100 to get a real value to compute with.
The opposite function is percentage() which already comes with Sass. They’ve just forgotten the unpercentage() function.
the strip unit function doesn’t work anymore with sass 1.49.9 because of the breaking change: slash as division
https://sass-lang.com/documentation/breaking-changes/slash-div
Here’s the revised version for Dart Sass
This actually doesn’t work quite like units in actual math, since you can’t simplify the addition of values with different units.
So, for $number: 5px;
$number / ($number * 0 + 1)
5px / (5px * 0 + 1)
5px / (0px + 1)
undefined + 5px