mirror of
https://github.com/danog/sass-site.git
synced 2024-12-04 10:28:22 +01:00
65 lines
1.9 KiB
Plaintext
65 lines
1.9 KiB
Plaintext
|
---
|
||
|
|
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
|
||
|
|
```
|