README.md

operator-no-unspaced

Disallow unspaced operators in Sass operations.

a { width: 10px*$n; }
/**            ↑
 * The space around this operator */

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; }

a { width: 10-1; }

a { width: 10px* 1.5; }

@if ($var==10) { ... }

a { width: 10px  * 1.5; } // More than one space

a { width: (10) /1; } // Has a value inside parens on one side, so is an operation

// Operations can be inside interpolation in selectors, property names, etc.
.class#{1 +1}name {
  color: red;
}

p {
  background-#{\"col\" +\"or\"}: red;
}

The following patterns are not considered warnings:

a { width: 10 * 1; }

a { width: 10 +1; } // A space-delimited Sass list

// A space-delimited Sass list, in "10px-" "10" is a number, "px-" is a unit
a { width: 10px- 1; }

a { width: 10px/1; } // Compiled as CSS, as in "font: 10px/1 ..."

a { width: (10) /#{1}; } // Has interpolation on one of the sides, so not an operation

a { width: $var-1; } // "$var-1" is a variable name

a { width: "10*1"; } // Inside a string, ignored

// Linebreak will do as a whitespace; indentation before "-" and trailing spaces after "1" are left to the corresponding stylelint rules
a {
  width: 1  
    - a;
}