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, it's 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 `divide()` function. This
function will behave exactly the same as `/` does today.

<% example do %>
  // Future Sass, doesn't work yet!
  .item3 {
    $row: span divide(6, 2) / 7; // A two-element slash-separated list.
    grid-row: $row;
  }
  ===
  // Future Sass, doesn't work yet!
  .item3
    $row: span divide(6, 2) / 7 // A two-element slash-separated list.
    grid-row: $row
  ===
  .item3 {
    grid-row: span 3 / 7;
  }
<% end %>

## Transition Period

<% impl_status dart: false, libsass: false, ruby: false, feature: "divide() and slash-list()" %>

To ease the transition, implementations will begin by adding the `divide()`
function. The `/` operator will continue to do division, but it also prints a
deprecation warning when it does so. Users should switch all division to use
`divide()` instead.

<% 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 divide(12px, 4px); // 3
  ===
  // WRONG, will not work in future Sass versions.
  @debug (12px/4px) // 3

  // RIGHT, will work in future Sass versions.
  @debug divide(12px, 4px) // 3
<% end %>

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

[`join()` function]: ../modules/list#join
[`append()` function]: ../modules/list#append

<% example do %>
  .item3 {
    $row: slash-list(span divide(6, 2), 7);
    grid-row: $row;
  }
  ===
  .item3
    $row: slash-list(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 `divide()` and `slash-list()`.

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

```shellsession
$ npm install -g sass-migrator
$ sass-migrator division **/*
```