Skip to content

Commit 27c36b2

Browse files
authored
Document strict unary operators (#670)
1 parent da15429 commit 27c36b2

File tree

2 files changed

+65
-0
lines changed

2 files changed

+65
-0
lines changed

data/documentation.yml

+1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ toc:
6060
- <code>sass:string</code>: /documentation/modules/string
6161
- Breaking Changes: /documentation/breaking-changes
6262
:children:
63+
- Strict Unary Operators: /documentation/breaking-changes/strict-unary
6364
- Random With Units: /documentation/breaking-changes/random-with-units
6465
- Invalid Combinators: /documentation/breaking-changes/bogus-combinators
6566
- Media Queries Level 4: /documentation/breaking-changes/media-logic
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: "Breaking Change: Strict Unary Operators"
3+
introduction: >
4+
Sass has historically allowed `-` and `+` to be used in ways that make it
5+
ambiguous whether the author intended them to be a binary or unary operator.
6+
This confusing syntax is being deprecated.
7+
---
8+
9+
How is this property compiled?
10+
11+
<% example(autogen_css: false) do %>
12+
$size: 10px;
13+
14+
div {
15+
margin: 15px -$size;
16+
}
17+
===
18+
$size: 10px
19+
20+
div
21+
margin: 15px -$size
22+
<% end %>
23+
24+
Some users might say "the `-` is attached to `$size`, so it should be `margin:
25+
20px -10px`". Others might say "the `-` is between `20px` and `$size`, so it
26+
should be `margin: 5px`." Sass currently agrees with the latter opinion, but the
27+
real problem is that it's so confusing in the first place! This is a natural but
28+
unfortunate consequence of CSS's space-separated list syntax combined with
29+
Sass's arithmetic syntax.
30+
31+
That's why we're moving to make this an error. In the future, if you want to use
32+
a binary `-` or `+` operator (that is, one that subtracts or adds two numbers),
33+
you'll need to put whitespace on both sides or on neither side:
34+
35+
* Valid: `15px - $size`
36+
* Valid: `(15px)-$size`
37+
* Invalid: `15px -$size`
38+
39+
If you want to use a unary `-` or `+` operator as part of a space-separated
40+
list, you'll (still) need to wrap it in parentheses:
41+
42+
* Valid: `15px (-$size)`
43+
44+
## Transition Period
45+
46+
<% impl_status dart: '1.55.0', libsass: false, ruby: false %>
47+
48+
We'll make this an error in Dart Sass 2.0.0, but until then it'll just emit a
49+
deprecation warning.
50+
51+
<%= partial '../snippets/silence-deprecations' %>
52+
53+
## Automatic Migration
54+
55+
You can use [the Sass migrator] to automatically update your stylesheets to add
56+
a space after any `-` or `+` operators that need it, which will preserve the
57+
existing behavior of these stylesheets.
58+
59+
[the Sass migrator]: https://github.com/sass/migrator#readme
60+
61+
```shellsession
62+
$ npm install -g sass-migrator
63+
$ sass-migrator strict-unary **/*.scss
64+
```

0 commit comments

Comments
 (0)