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

{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
{% compatibility 'partial', false, null, false %}{% endcompatibility %}

{% markdown %}
  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 '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 %}

{% markdown %}
  ## Transition Period

  {% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
  {% 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.
{% endmarkdown %}

{% render 'documentation/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 %}

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

{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %}
{% compatibility '1.40.0', false, null, false, 'First-class calc' %}{% endcompatibility %}

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

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

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