4.3 KiB
| title | introduction |
|---|---|
| Breaking Change: Slash as Division | 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. |
{% compatibility 'dart: "partial"', 'libsass: false', 'ruby: false' %}{% endcompatibility %}
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.
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.
{% 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 %}
Transition Period
{% compatibility 'dart: "1.33.0"', 'libsass: false', 'ruby: false', 'feature: "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.
{% render 'doc_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 %}
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.
{% 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 {% endcodeExample %}
{% compatibility 'dart: "1.40.0"', 'libsass: false', 'ruby: false', 'feature: "First-class calc"' %}{% endcompatibility %}
Alternatively, users can wrap division operations inside a calc() expression,
which Sass will simplify to a single number.
{% 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 %}
Automatic Migration
You can use the Sass migrator to automatically update your stylesheets to
use math.div() and list.slash().
$ npm install -g sass-migrator
$ sass-migrator division **/*.scss