How to fix - sasserror math div

Introduction

When you get the SassError: math.div this is usually due to the SASS version you are using. The math.div() function is introduced in SASS version equal to or greater than version 1.33.0 and only for Dart SASS compiler.

It is not supported in Ruby Sass or LibSass (node-sass on npm).

I was working with a legacy Angular app that uses SASS and when I saw that it was using a lot of forward slashes ("/").

I thought I could just replace all of this with use the div() function - however the error comes up:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
  ╷
4 │   min-height: math.div(100, 2);
  │                 ^^^^^^^^^^^^^^^^
  ╵
  src\app\app.component.scss 4:17  root stylesheet

Using the div() function is the recommended way to do division operations since it does not conflict with the CSS forward slash shorthands.

So after a bit of scratching my head and looking online, I noticed that the math.div function is only available on SASS versions 1.33.0 or greater.

After knowing this, it resulted in me overhauling the whole project to convert to Dart Sass instead of using the legacy node-sass.

Why do we get SassError math.div errors?

Historically SASS has got issues with the division since it sort of conflicts with the CSS meaning of the forward slash.

They currently use complex heuristics to determine if a “/” should be considered division or a separator, but this approach has been causing issues, particularly as newer CSS features also use “/” as a separator.

As examples the forward slash ("/") in CSS can mean different things:

• Font shorthand property: The “/” is used to separate the font-size and line-height properties.

.example {
    font: 16px/1.5 Arial, sans-serif;
}

• Background Shorthand property - The “/” is used to separate the background-position and background-size properties.

.example {
    background: url(image.jpg) no-repeat center/contain;
}

• Grid Shorthand property - The “/” is used to separate grid-template-rows and grid-template-columns.

.grid-container {
    display: grid;
    grid-template: 100px 200px / 50% 50%;
}

• The CSS aspect-ratio property, you can use the “/” (forward slash) to define the width-to-height aspect ratio for a box, which can be very useful for responsive design, especially for images and videos. This property is mainly used to maintain the proportions of an element, even as the screen or the size of the element changes.

Here is an example:

.image {
  aspect-ratio: 16 / 9;
}

In the example above, the aspect-ratio property is used to specify a 16:9 aspect ratio, which is common for widescreen video. The box will maintain this aspect ratio as it resizes.

To improve alignment with CSS and simplify the process, Sass has decided to redefine “/” as a list separator only.

Upgrading SASS

Now if we want to fix this SassError: math.div issue, then its best to upgrade SASS and use Dart SASS as the compiler.

The recommendation is that division operations in Sass will now be performed using the new math.div() function, which behaves exactly as “/” did previously. The use of “/” inside calc() expressions will not be impacted by this change!

Starting with Dart Sass 1.33.0, the / for division is deprecated and replaced by math.div() because / is also used for separating list items, which can lead to confusing and buggy behavior.

The aim of the change is to make the syntax clearer and more reliable.

Make sure to import the sass:math module

One other thing to check even when you have already upgraded to the latest SASS is to check that you have imported correctly.

This requires you to import the sass:math module before you can use the math.div() function.

An example of using this is as follows:

@use "sass:math";

$width: 900px;
$columns: 3;

.column {
  width: math.div($width, $columns);  // Division is done using "math.div()" function.
}

Note: The usage of @use to import modules is also a relatively new addition to Sass that’s replacing @import. It’s a good idea to start using @use if you’re not already, as @import is on the path to being deprecated.

Automated Migration

Luckily the SASS team provides a migration path (https://sass-lang.com/documentation/breaking-changes/slash-div).

If you have many instances of division, you may want to take a look at the automatic migration tool provided by Sass.

Install the tool globally using npm

npm install -g sass-migrator

Run the codemod on all .scss files recursively from the working directory

sass-migrator division **/*.scss

Alternative: Use NPX instead

Now if you do not like to install packages thats going to be used in short time frame and so do not want to clogging space on your machine, you can opt for using the NPX option:

npx can be used to install temporarily and immediately run (similar to above) npx --yes sass-migrator division **/*.scss

Compatibility

It’s important to remember that the shift towards deprecation is a gradual process. At present, the math.div function is exclusively supported in Dart Sass (accessible via npm) versions 1.33.0 or later, and lacks support in Ruby Sass or LibSass (available through node-sass on npm).

Therefore, you can safely update if the Sass files are only being compiled within your specific project. However, for those who maintain libraries that distribute Sass, such as Bootstrap for instance, it’s crucial to proceed with caution as this transition could introduce breaking changes.

Tip: You may still need node-sass

If you are using a library that still is on node-sass, such as Bootstrap, then you are stuck without the division function. You will still have to use the forward slash ("/") unless you move away from that library.

Until that time comes, you will still need to compile your SASS code with node-sass instead of Dart.

Summary

Overall, you can fix the SassError: Undefined function math.div but upgrading to SASS versions 1.33.0 or greater.

Additionally check if you are using the right syntax and need to have the Sass Math module @use sass:math;

References

• https://sass-lang.com/documentation/breaking-changes/slash-div