Publicize the slash-div deprecation page (#539)

See sass/sass#2565
This commit is contained in:
Natalie Weizenbaum 2021-05-17 19:09:58 -07:00 committed by GitHub
parent 35c51fbe33
commit 077c20255a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 11 deletions

View File

@ -59,6 +59,7 @@ toc:
- <code>sass:string</code>: /documentation/modules/string
- Breaking Changes: /documentation/breaking-changes
:children:
- <code>/</code> as Division: /documentation/breaking-changes/slash-div
- Color Units: /documentation/breaking-changes/color-units
- Extending Compound Selectors: /documentation/breaking-changes/extend-compound
- CSS Variable Syntax: /documentation/breaking-changes/css-vars

View File

@ -23,6 +23,9 @@ time-sensitive, so they may be released with new minor version numbers instead.
These breaking changes are coming soon or have recently been released:
* [`/` is changing from a division operation to a list
separator](breaking-changes/slash-div) beginning in Dart Sass 1.33.0.
* [Color functions are becoming more strict about
units](breaking-changes/color-units) beginning in Dart Sass 1.32.0.

View File

@ -19,10 +19,11 @@ use `/` as a separator, this is becoming more and more painful to Sass users.
[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.
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";
@ -47,13 +48,12 @@ This function will behave exactly the same as `/` does today.
## Transition Period
<% impl_status dart: false, libsass: false, ruby: false,
<% impl_status dart: "1.33.0", 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.
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";
@ -82,13 +82,17 @@ create them. You will also be able to pass `"slash"` as the `$separator` to the
[`list.append()` function]: ../modules/list#append
<% example do %>
@use "sass:list";
.item3 {
$row: slash-list(span divide(6, 2), 7);
$row: list.slash(span divide(6, 2), 7);
grid-row: $row;
}
===
@use "sass:list";
.item3
$row: slash-list(span divide(6, 2), 7)
$row: list.slash(span divide(6, 2), 7)
grid-row: $row
===
.item3 {