sass-site/source/documentation/breaking-changes/slash-div.html.md.erb

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

<% impl_status dart: false, libsass: false, ruby: false %>

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]: ../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.

<% example do %>
  @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;
  }
<% end %>

## Transition Period

<% impl_status dart: "1.33.0", libsass: false, ruby: false,
               feature: "math.div() and list.slash()" %>

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.

<% example(autogen_css: false) do %>
  @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
<% end %>

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]: ../modules/list#join
[`list.append()` function]: ../modules/list#append

<% example do %>
  @use "sass:list";

  .item3 {
    $row: list.slash(span divide(6, 2), 7);
    grid-row: $row;
  }
  ===
  @use "sass:list";

  .item3
    $row: list.slash(span divide(6, 2), 7)
    grid-row: $row
  ===
  .item3 {
    grid-row: span 3 / 7;
  }
<% end %>

## 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 **/*
```