53

I know you can strip units from numbers in SASS when you know the unit before-hand like this:

$number: 16px;
$without-unit: 16px / 1px;
@warn $without-unit; // 16

But is it possible to strip the unit from a number without knowing what the unit is first?

@function strip-unit($number) {
  // magic code here...
}

@warn strip-unit(16px); // 16
2

3 Answers 3

133

--

UPDATE: You should never actually need to use this function. Sass math is very smart about units, and I have never seen a use-case in which stripping units was a better option than simply using correct math to get what you need. See the Sass issue thread where this has been discussed at length.

It's a clever function, but if you ever feel like using it, there's probably a problem with your math. Don't fall back on this function. Fix your math instead.

--

You need to divide by 1 of the same unit. If you use unit(), you get a string instead of a number, but if you multiply by zero and add 1, you have what you need:

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

UPDATE: In the latest versions of Sass, that becomes:

@use 'sass:math';

@function strip-units($number) {
  @return math.div($number, ($number * 0 + 1));
}

That works. strip-units(13.48cm) will return 13.48.

16
  • 4
    @EricMeyer if I use this code within my application (copied 1:1 from your example) I get this warning --> Syntax error: Undefined operation: "2.1875rem times 0" at the line-number of the @return statement... I'm using this function within another function because it seems that I'm not able to use SASS to add two rem units...
    – herom
    Nov 18, 2013 at 10:30
  • 2
    It amazes me that SASS doesn't provide this function out of the box. Jul 6, 2014 at 11:38
  • 2
    @EricMSuzanne, Here's a real world use case. I have a map of breakpoints (550px,1024px). Now I want to loop through that map and add a media query for each one. Easy. But I also want to add a class for each breakpoint, such as .show-from-$var-up. I would like that to parse to .show-from-550-up not .show-from-550px-up.
    – JakeParis
    Feb 17, 2015 at 17:07
  • 7
    »never seen a use-case in which stripping units was a better option than simply using correct math« Then you do not know all use cases…
    – feeela
    Jul 24, 2015 at 15:24
  • 2
    Use case: when an image url needs a lightness value without a %.
    – Jason
    Sep 8, 2016 at 6:23
0

I think you'd have to add a custom Ruby function to strip the units (see the documentation on adding custom functions). It would look something like this, I think (warning, untested):

module Sass::Script::Functions
  def strip_units(num)
    assert_type num, :Number
    Sass::Script::Number.new(num.value)
  end
end
0

The only use case for strip units SASS function is when writing unit conversion functions. I've only found it useful for the task of converting PX to EM/REM and vice versa.

You need to divide by 1 of the same unit. If you use unit(), you get a string instead of a number, but if you multiply by zero and add 1, you have what you need - Miriam Suzanne

I believe SASS compiler treats values very similarly to what PHP interpreter does (with a warning though), so I believe the statement above is incorrect. If you divide or multiply a string (which starts with a number e.g. '16px') with a number value (or a string value that starts with a number), the string is converted to number for the compiler to be able to perform the operation.

Same goes for adding a string to number, it converts the number to a string.

The following solution applies this tactic correctly:

@function strip-unit($value) {
  @return $value / 1;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.