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

Comments

  1. User Avatar
    konstantinos
    Permalink to comment#

    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!

    • User Avatar
      Hugo Giraudel
      Permalink to comment#

      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.

    • User Avatar
      Karl
      Permalink to comment#

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

  2. User Avatar
    Alexandre Pigeot
    Permalink to comment#

    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. User Avatar
    Ciara
    Permalink to comment#

    1232

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag