mirror of
https://github.com/danog/sass-site.git
synced 2024-12-16 03:17:15 +01:00
110 lines
3.3 KiB
Plaintext
110 lines
3.3 KiB
Plaintext
---
|
|
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 `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: false, libsass: false, ruby: false,
|
|
feature: "math.div() and list.slash()" %>
|
|
|
|
To ease the transition, implementations will begin by adding the `math.div()`
|
|
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
|
|
`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 %>
|
|
.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 `math.div()` and `list.slash()`.
|
|
|
|
[the Sass migrator]: https://github.com/sass/migrator#readme
|
|
|
|
```shellsession
|
|
$ npm install -g sass-migrator
|
|
$ sass-migrator division **/*
|
|
```
|