sass-site/source/documentation/breaking-changes/slash-div.liquid

---
title: "Breaking Change: Slash as Division"
introduction: >
  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.
---

{% markdown %}
{% compatibility 'partial', false, null, 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.

[complex heuristics]: /documentation/operators/numeric#slash-separated-values
[CSS Grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
[new `rgb()` and `hsl()` syntax]: https://drafts.csswg.org/css-color/#rgb-functions

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.
{% endmarkdown %}

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

{% markdown %}
## Transition Period

{% compatibility '1.33.0', false, null, false, '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.

{% include 'documentation/snippets/silence-deprecations' %}
{% endmarkdown %}

{% codeExample 2, 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 %}

{% markdown %}
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][].

[`list.join()` function]: /documentation/modules/list#join
[`list.append()` function]: /documentation/modules/list#append
{% endmarkdown %}

{% codeExample 3 %}
@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
===
.item3 {
  grid-row: span 3 / 7;
}
{% endcodeExample %}

{% markdown %}
{% compatibility '1.40.0', false, null, false, 'First-class calc' %}{% endcompatibility %}

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

{% codeExample 4, false %}
<% example(autogen_css: false) do %>
// 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 %}

{% markdown %}
## Automatic Migration

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

[the Sass migrator]: https://github.com/sass/migrator#readme

```shellsession
$ npm install -g sass-migrator
$ sass-migrator division **/*.scss
```
{% endmarkdown %}