# Fixed - sasserror is not a number

Steps to fix sasserror is not a number issue

Jun 24, 2023 | Read time 7 minutes## š Table of contents

## 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