Breaking Change: Slash as Division

Sass 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.

Compatibility:
Dart Sass
partial
LibSass
✗
Ruby Sass
✗

Today, Sass uses complex heuristics to figure out whether a / should be treated as division or a separator. Even then, as a separator it just produces an unquoted string that’s difficult to inspect from within Sass. As more and more CSS features like CSS Grid and the new rgb() and hsl() syntax use / as a separator, this is becoming more and more painful to Sass users.

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.

This deprecation does not affect uses of / inside calc() expressions.

SCSS Syntax

@use "sass:math";

// Future Sass, doesn't work yet!
.item3 {
  $row: span math.div(6, 2) / 7; // A two-element slash-separated list.
  grid-row: $row;
}

Sass Syntax

@use "sass:math"

// Future Sass, doesn't work yet!
.item3
  $row: span math.div(6, 2) / 7 // A two-element slash-separated list.
  grid-row: $row

CSS Output

.item3 {
  grid-row: span 3 / 7;
}

Transition PeriodTransition Period permalink

Compatibility (math.div() and list.slash()):
Dart Sass
since 1.33.0
LibSass
✗
Ruby Sass
✗

To ease the transition, we’ve begun by adding the math.div() function. The / operator still does division for now, but it also prints a deprecation warning when it does so. Users should switch all division to use math.div() instead.

💡 Fun fact:

Remember, you can silence deprecation warnings from libraries you don’t control! If you’re using the command-line interface you can pass the --quiet-deps flag, and if you’re using the JavaScript API you can set the quietDeps option to true.

SCSS Syntax

@use "sass:math";

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px); // 3

Sass Syntax

@use "sass:math"

// WRONG, will not work in future Sass versions.
@debug (12px/4px) // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px) // 3

Slash-separated lists will also be available in the transition period. Because they can’t be created with / yet, the list.slash() function will be added to create them. You will also be able to pass "slash" as the $separator to the list.join() function and the list.append() function.

SCSS Syntax

@use "sass:list";
@use "sass:math";

.item3 {
  $row: list.slash(span math.div(6, 2), 7);
  grid-row: $row;
}

Sass Syntax

@use "sass:list"
@use "sass:math"

.item3
  $row: list.slash(span math.div(6, 2), 7)
  grid-row: $row

CSS Output

.item3 {
  grid-row: span 3 / 7;
}
Compatibility (First-class calc):
Dart Sass
since 1.40.0
LibSass
✗
Ruby Sass
✗

Alternatively, users can wrap division operations inside a calc() expression, which Sass will simplify to a single number.

SCSS Syntax

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug calc(12px / 4px); // 3

Sass Syntax

// WRONG, will not work in future Sass versions.
@debug (12px/4px) // 3

// RIGHT, will work in future Sass versions.
@debug calc(12px / 4px) // 3

Automatic MigrationAutomatic Migration permalink

You can use the Sass migrator to automatically update your stylesheets to use math.div() and list.slash().

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