Fix Using / for division is deprecated removed in DartSass2

Fix Using / for division is deprecated removed in DartSass2

During angular application migration from 11 to 12, I got the warning message during ng build command execution. DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($min-width, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

Let’s see how to fix this warning message

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0

This issue says the division operator is deprecated and SASS forces us to replace it with math.div function

This issue occurs not also upgrading the angular framework, but also when upgrading the sass version in other applications using the below frameworks.

  • Reactjs
  • Vuejs
  • NuxtJS
  • Bootstrap framework
  • Any nodejs application which has sass dependency upgraded in package.json

This error causing in dart sass but not in node-sass, Anyway, libsass is deprecated and not being used anymore.

My Application is an angular medium size application using a sass server.

And my Angular application is using the sass 1.34 npm library version.

"devDependencies": {

    "sass": "~1.34"
}

Let me explain what is the warning about in the existing code.

In one of sass file, first.scss

$min-width: 800;
content {
  width: $min-width/2;
}

IN sass classes, I have used division operator \/ to make half of the width. When you compile the sass code with nodejs build of angular, You will get an error.

The reason is due to the sass version is greater than or equal to 1.33.0.

Solution for this issue

  • Using math. div
  • compile sass files with older sass version

math module div function

It is easy to fix, Latest sass provides a math module that has a div function.

math. div is only supported in the dart-sass version, Not in the node-sass version

@use "sass:math";
math.div in sass
$min-width:800;
content{

width: math.div($min-width, 2);
}

if division separation is in many code places, You can choose another approach.

compile sass files with older sass version

In package.json, Please change the version from 1.34 to the 1.32.12 version

"devDependencies": {

    "sass": "~1.32.12"
}

Here are the steps to do

  • delete node_modules of your project
  • delete package_lock.json
  • run the npm install command again
  • This installs an older version and works as expected

Why sass framework introduces math.div replacing division operator?

/ operator in SASS used in different places

  1. used as a division operator in arithmetic calculation
  2. As a separator being used in grid-rows or grid-columns of CSS grid and rgl and HSL functions

As sass is advanced and superior to CSS, To clear confusion, the division operator is being removed in future versions of sass. Hence, the Sass framework recommends using the Math.div function.

Conclusion

In this tutorial, learn how to fix a warning DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. in Angular application.