Fixed - sasserror is not a number

Introduction

The “SassError is not a number” is usually caused by doing math operations (addition, subtraction, division, multiplication) on non-numeric values.

I recently had this issue with a Angular project that I was working with SASS and I was using the min() function.

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 
SassError: var(--ag-theme-row-height, 26px) is not a number.

After a lot of scratching my head and researching through the SASS docs, it came down to the following line.

line-height: min(var(--ag-row-height, ag-param(row-height) - 2px), ag-param(row-height) - 2px);

It seems like I was conflicting the use of the min() function from CSS to the min() function in SASS!

This post will go through the steps I went through to check where the error is occurring and how to fix it.

Clashing functions with CSS

CSS added support for min() and max() functions in Values and Units Level 4, from where they were quickly adopted by Safari to support the iPhoneX. But Sass supported its own min() and max() functions long before this, and it needed to be backwards-compatible with all those existing stylesheets.

This caused conflicts on which function to choose from and resulting in the error: “SassError is not a number”

Tip: Use uppercase for conflicting SASS functions

The trick here is to remember that Sass is case-sensitive, but CSS isn’t.

That means we can write Min(20em, 50vh) and Sass won’t recognize it as its own min() function.

Consider using the built in SASS functions

Now if you are using the latest version of SASS in your project and also compiling it with Dart, then I would suggest to use the in-built “math” module.

@use "sass:math";

$top: 10;
$bottom: 3;

.column {
  width: math.min($top, $bottom);  // min of top and bottom variables
}

Verify you are using the operations correctly

Now the error can come up for basic math operations. So we have to check the line that the error is complaining about and look at the math operations.

If we are doing addition, subtraction, division, or multiplication - then check that they are numbers.

In Sass, you can perform various mathematical operations, including but not limited to:

• Addition (+)
• Subtraction (-)
• Multiplication (*)
• Division (/)
• Modulo (%)

So let’s say you have the following Sass code:

$padding: 10;
$margin: '20px';

$total-spacing: $padding + $margin;

We can see that this will give us the error, $margin is a string and $padding is a number. This is a simple example, but in most projects I have worked on, it can be complicated to track down since it could involve a heap of variables so you will have to break it down.

One way we can check if the variable is a integer/number is by using the the type-of() in-built function. This function takes one value and tells you what type it is - we can use this to check for “number”.

For example, in my project, I usually create this function is-int to check for integers:

@function is-int($value) {
    @if type-of($value) != number {
        @warn '`#{$value}` is not a valid number!';
        @return null;
    }
    @return round($value) == $value;
}

We can use it as follows:

p {
    @if is-int(42) {
        color: orange;
    }
}

// result

p {
   color: orange

}

The last might look strange but it is just using the in-built function round() to check:

@return round($value) == $value;

The round function rounds $value to the nearest integer.

If $value is already an integer, rounding it doesn’t change its value, so round($value) == $value is true.

If $value is not an integer, rounding it does change its value, so round($value) == $value is false.

Make sure to convert

One way to fix this “sasserror is not a number” is to convert the variables involved to the same type.

Convert number to string

If you need to a number to a string, then we can use string interpolation #{}:

.selector  {
  $size: 10;
  font-size: calc(#{$size}/2);
}

// results in:

.selector {
  font-size: calc(10/2);
}

Now I have used that to create a generic function to convert a number to string like so:

@function transform-number-to-string($value) {
  @if type-of($value)=='number' {
    @return #{$value};
  }
  @else if type-of($value)=='string' {
    @return $value;
  }
  @else {
    @error 'Input #{$value} is no number or string';
  }
}

Convert string to number

If you need to go from string to a number then use the following function to do so. I have used the following function in many of my SASS projects and it seems to get the job done!

Just use it as number('12') and it will give the number representation of 12!

@function number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    $_: log('Value for `to-number` should be a number or a string.');
  }
  
  $result: 0;
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
  
  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);
    
    @if not (index(map-keys($numbers), $character) or $character == '.') {
      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
    }
    
    @if $character == '.' {
      $digits: 1; 
    } @else if $digits == 0 {
      $result: $result * 10 + map-get($numbers, $character);  
    } @else {
      $digits: $digits * 10;
      $result: $result + map-get($numbers, $character) / $digits;
    }
  }
  
  @return if($minus, -$result, $result);;
}

Summary

In this post, I went over how to fix “sasserror is not a number”. We can fix this by:

• Checking that we are not mixing CSS functions with SASS functions. For example CSS introduced the min() and max() functions and this will conflict with the SASS functions of the same name.
• Verify that the math operations are correct and that the variables are of the same type
• Make sure to convert the variables to a number