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
Because Sass is a CSS superset, we’re matching CSS’s syntax by redefininghttps://sass-lang.com/documentation/breaking-changes/slash-div
/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
How to fix it
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:
Or, you can just upgrade a single formula with:
brew upgrade 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%;
padding-top: math.div(9, 16) * 100%;
Also, make sure you include the math module:
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.