Breaking Change: Strict Unary Operators

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?

SCSS Syntax

$size: 10px;

div {
  margin: 15px -$size;
}

Sass Syntax

$size: 10px

div
  margin: 15px -$size

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 permalinkTransition Period

Compatibility:
Dart Sass
since 1.55.0
LibSass
✗
Ruby Sass
✗

We’ll make this an error in Dart Sass 2.0.0, but until then it’ll just emit a deprecation warning.

💡 Fun fact:

Remember, you can silence deprecation warnings from libraries you don’t control! If you’re using the command-line interface you can pass the --quiet-deps flag, and if you’re using the JavaScript API you can set the quietDeps option to true.

Automatic Migration permalinkAutomatic 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.

$ npm install -g sass-migrator
$ sass-migrator strict-unary **/*.scss