Pattern: Use of newline after Sass operator
Issue: -
Disallow newlines after Sass operators.
a { width: 10px + $n; }
/** ↑
* newline after 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 likefont: 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: str- // not a math operator, ignored
some;
}a { width: 10px - 1; }a {
width: 10px * 1.7 // the newline is not right after the operator
+ 1;
}