Recently Sass announced they’re going to include a breaking change in order to comply with the latest CSS syntax. This affects everything that uses the / symbol.

Because Sass is a CSS superset, we’re matching CSS’s syntax by redefining / to be only a separator. / will be treated as a new type of list separator, similar to how , works today. Division will instead be written using the new math.div() function. This function will behave exactly the same as / does today.

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

How to fix it

Update Sass

If your codebase is manageable and you have time, you should update Sass and fix every occurrence. If you installed Sass globally via npm, you can update it this way:

npm update -g sass

If you, like me, installed Sass on macOS via Homebrew, you should upgrade and update via Brew:

First update the formulae and Homebrew itself: brew update
Find outdated: brew outdated
Upgrade everything: brew upgrade

Or, you can just upgrade a single formula with: brew upgrade sass

Gulp-Sass

If you’re using Gulp to run your project you’re probably using the gulp-sass package to compile Sass files. In that case, you should move to use gulp-dart-sass, which uses the latest Dart-based Sass version. Just install gulp-dart-sass via npm and switch those in your gulpfile.

Update your codebase

This is the “easy” part. You should update your divisions from:

padding-top: (9 / 16) * 100%;

to:

padding-top: math.div(9, 16) * 100%;

Also, make sure you include the math module:

@use "sass:math";

Other options

You can use Sass-migrator to do the heavy lifting for you:

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss

Lastly —although not really recommended: you could downgrade to a previous Sass version.

Links

• Breaking Change: Slash as Division
• Sass migrator