Fix Using / for division is deprecated removed in DartSass2


when i am migrating angular application from 11 to 12,  I got the below warning message during ng build command execution.

During migration, I got below warning message while running ng build command

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

This issue can arise and not just when upgrading the angular framework, but also when upgrading the sass version in other applications using 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 any more.   My Application is angular medium size application using sass server

Angular application is using sass 1.34 npm library version

"devDependencies": {
    
    "sass": "~1.34"
}

Let me explain what is the warning about in existin g 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 width . When you compile the sass code with nodejs build of angular, You will get an error.

The reason is due to sass version is greater than equal to 1.33.0

Solution for this issue

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

math module div function

This is easy to fix, Latest sass provides math module which has div function

math.div is only supported in dart-sass version, Not in 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 version from 1.34 to 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 npm install command again
  • This installs older version and works as expected

Why sass framework introduced math.div replacing division operator ?

/ operator in SASS used in different places

  1. used as a division operator  in arthmatic calculcation
  2. As a separator being used in grid-rows or grid-columns of css grid and rgl and hsl functions

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.