Fix Sass slash error in gulp

If you’ve ever worked on an old project, you might have seen the following error in gulp:

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

Recommendation: math.div($spacer, 2)

This can happen when the installed node and gulp versions are different to those in the project’s package.json file.

Simple automatic migration fix

The simplest way to fix this in a project is to install the sass-migrator plugin globally (using the -g flag). Run the following command once:

npm install -g sass-migrator

Then inside the project or theme folder type

sass-migrator division **/*.scss

The migrator plugin runs over each .scss file in your project and will automatically fix any files with the old code. You’ll notice a new “@use “sass:math”; line at the top of each fixed file.

// Old way - wrong
.element {
  padding: 20px / 2;
}

// New way - right
@use "sass:math";

.element {
  padding: math.div(20px, 2);
}

// This also works
.element {
  padding: calc(20px / 2);
}

For a simple division by 2, you could also achieve the same results with this:

// Alternative way
.element {
  padding: 20px * 0.5;
}

It’s worth pointing out that if you are using the math.div function you need to make sure the @use "sass:math"; is at the top of the scss file or you may have issues compiling. Make sure to include this at the top of each partial or it won’t work properly.

More information about this change

Sass made this breaking change because it currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator.