{% compatibility 'dart: "partial"', 'libsass: false', 'ruby: false' %}{% endcompatibility %}

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.

{% codeExample 'slash-div' %} @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; }

@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

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

Transition Period

{% compatibility 'dart: "1.33.0"', 'libsass: false', 'ruby: false', 'feature: "math.div() and list.slash()"' %}{% endcompatibility %}

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.

{% render 'doc_snippets/silence-deprecations' %}

{% codeExample 'math-div', false %} @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

@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 {% endcodeExample %}

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.

{% codeExample 'slash-div-list' %} @use "sass:list"; @use "sass:math";

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

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

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

{% compatibility 'dart: "1.40.0"', 'libsass: false', 'ruby: false', 'feature: "First-class calc"' %}{% endcompatibility %}

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

{% codeExample 'slash-div-calc', false %} // WRONG, will not work in future Sass versions. @debug (12px/4px); // 3

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

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

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

Automatic Migration

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

{% render 'silencing_deprecations' %}