Strip-unit Function

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;
// -> 42``````

But 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``````

1. konstantinos

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!

• Hugo Giraudel

Agreed, use-cases are quite uncommon. One that has been suggested to me by Reda Lemeden (Bourbon, Neat, …):

``````\$container-width: 40rem;
\$container-breakpoint: strip-unit(\$container-width) * 16px;
``````

Most of the time, it is possible to work around the issue by manipulating units the right way.

• Karl

Unitless line-height calculations is a specific example if you find yourself with a variable set with a unit…

2. Alexandre Pigeot

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.

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.

3. Ciara