forked from sass/sass-site
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Document strict unary operators (sass#670)
- Loading branch information
Israel-4Ever
committed
Sep 15, 2022
1 parent
0768053
commit 3fe5591
Showing
2 changed files
with
65 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
--- | ||
title: "Breaking Change: Strict Unary Operators" | ||
introduction: > | ||
Sass has historically allowed `-` and `+` to be used in ways that make it | ||
ambiguous whether the author intended them to be a binary or unary operator. | ||
This confusing syntax is being deprecated. | ||
--- | ||
|
||
How is this property compiled? | ||
|
||
<% example(autogen_css: false) do %> | ||
$size: 10px; | ||
|
||
div { | ||
margin: 15px -$size; | ||
} | ||
=== | ||
$size: 10px | ||
|
||
div | ||
margin: 15px -$size | ||
<% end %> | ||
|
||
Some users might say "the `-` is attached to `$size`, so it should be `margin: | ||
20px -10px`". Others might say "the `-` is between `20px` and `$size`, so it | ||
should be `margin: 5px`." Sass currently agrees with the latter opinion, but the | ||
real problem is that it's so confusing in the first place! This is a natural but | ||
unfortunate consequence of CSS's space-separated list syntax combined with | ||
Sass's arithmetic syntax. | ||
|
||
That's why we're moving to make this an error. In the future, if you want to use | ||
a binary `-` or `+` operator (that is, one that subtracts or adds two numbers), | ||
you'll need to put whitespace on both sides or on neither side: | ||
|
||
* Valid: `15px - $size` | ||
* Valid: `(15px)-$size` | ||
* Invalid: `15px -$size` | ||
|
||
If you want to use a unary `-` or `+` operator as part of a space-separated | ||
list, you'll (still) need to wrap it in parentheses: | ||
|
||
* Valid: `15px (-$size)` | ||
|
||
## Transition Period | ||
|
||
<% impl_status dart: '1.55.0', libsass: false, ruby: false %> | ||
|
||
We'll make this an error in Dart Sass 2.0.0, but until then it'll just emit a | ||
deprecation warning. | ||
|
||
<%= partial '../snippets/silence-deprecations' %> | ||
|
||
## Automatic Migration | ||
|
||
You can use [the Sass migrator] to automatically update your stylesheets to add | ||
a space after any `-` or `+` operators that need it, which will preserve the | ||
existing behavior of these stylesheets. | ||
|
||
[the Sass migrator]: https://github.com/sass/migrator#readme | ||
|
||
```shellsession | ||
$ npm install -g sass-migrator | ||
$ sass-migrator strict-unary **/*.scss | ||
``` |