notes/node_modules/stylelint-scss/src/rules/dollar-variable-no-missing-interpolation/README.md

dollar-variable-no-missing-interpolation

Disallow Sass variables that are used without interpolation with CSS features that use custom identifiers.

.class {
  $var: "my-anim";
  animation-name: $var;
//                ↑
// This variable needs to be interpolated
// because its value is a string
}

Sass variables that contain a custom identifier as a string always require interpolation when used. Some CSS at-rules require variable interpolation even when the custom identifier value is not a string.

For example, your CSS animation could look like this:

animation: myAnim 5s;

When you store your custom identifier as string in a Sass variable...

$myVar: "myAnim";

...then you need to make sure that the variable is interpolated when it gets used:

animation: #{$myVar} 5s;

If you do not interpolate the variable, Sass will compile your animation name to a string, producing invalid CSS:

animation: "myAnim" 5s;

This rule can only check for variables that are defined inside the same file where they are used.

The following patterns are considered warnings:

$var: my-anim;

@keyframes $var {}

$var: "circled-digits";

@counter-style $var {
  system: fixed;
  symbols: ➀ ➁ ➂;
  suffix: ' ';
  speak-as: numbers;
}

$var: "my-counter";

body {
  counter-reset: $var;
}

$var: "my-anim";

@supports (animation-name: $var) {
  @keyframes {}
}

The following patterns are not considered warnings:

$var: my-anim;

@keyframes #{$var} {}

$var: circled-digits;

@counter-style #{$var} {
  system: fixed;
  symbols: ➀ ➁ ➂;
  suffix: ' ';
  speak-as: numbers;
}

$var: my-counter;

body {
  counter-reset: $var;
}

$var: my-anim;

@supports (animation-name: $var) {
  @keyframes {}
}