mirror of
https://github.com/danog/sass-site.git
synced 2024-12-04 02:17:57 +01:00
139 lines
4.1 KiB
Plaintext
139 lines
4.1 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: :partial, 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.
|
|
|
|
This deprecation does not affect uses of `/` inside `calc()` expressions.
|
|
|
|
<% 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.
|
|
|
|
<%= partial '../snippets/silence-deprecations' %>
|
|
|
|
<% 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";
|
|
@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;
|
|
}
|
|
<% end %>
|
|
|
|
<% impl_status dart: "1.40.0", libsass: false, ruby: false, feature: "First-class calc" %>
|
|
|
|
Alternatively, users can wrap division operations inside a `calc()` expression,
|
|
which Sass will simplify to a single number.
|
|
|
|
<% 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
|
|
<% 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 **/*.scss
|
|
```
|