Details

Disabled by default

Properties, like color and font, are easier to read and maintain when defined using variables rather than literals.

Bad

p {
  color: red;
}

.warning {
  color: #ff0;
}

Good

p {
  color: $body-text;
}

.warning {
  color: $body-warning;
}

By using variables, you can describe the semantics of the property value rather than just using the literal value (improving readability) and also make it easier to perform side-wide changes as you only need to change the value in one place, rather than several.

By default, this linter does not enforce the use of variables for any property. To enable it, set the properties option in your configuration, e.g.

linters:
  VariableForProperty:
    enabled: true
    properties:
      - color
      - font

Note that values like currentColor, inherit, and transparent will not be reported, as they are special kinds of values that convey additional meaning.