operator-no-newline-before.md

Pattern: Use of newline before Sass operator

Issue: -

Description

Disallow newlines before Sass operators.

a { width: 10px
    + $n; }
/** ↑
 * newline before this */

This rule checks math operators (+, -, /, *, %) and comparison operators (>, <, !=, ==, >=, <=).

Not all symbols that correspond to math operators are actually considered operators by Sass. Some of the exceptions are:

• + and - as signs before values;
• + and - as signs in space-delimited lists;
• - as part of a string or a Sass identifier, e.g. a variable;
• / as a CSS delimiter in property values like font: 10px/1.2 Arial; (read more).

For more details refer to Sass official documentation. An online Sass compiler - Sassmeister - could also come in handy.

The following patterns are considered warnings:

a { width: 10
+ 1; }

a {
  width: 10
    + 1;
}

The following patterns are not considered warnings:

a {
  width: 10px
    -1; // not a math operator, ignored
}

a { width: 10px     -    1; }

a {
  width: 100px +
    $var * 0.5625; // the newline is not right before the operator
}

Further Reading

• stylelint-scss - operator-no-newline-before