rules.scsslint.ColorVariable.html Maven / Gradle / Ivy
Details
Prefer color literals (keywords or hexadecimal codes) to be used only in
variable declarations. They should be referred to via variables everywhere else.
Bad: literal color
p {
color: green;
}
Good: refer to color by variable name
$body-color: #0f0;
...
p {
color: $body-color;
}
Defining colors directly in properties is usually a smell. When you color your
body text in a number of places, if you ever want to change the color of the
text you'll have to update the explicitly defined color in a number of places,
and finding all those places can be difficult if you use the same color for
other elements (i.e. a simple find/replace may not always work).
A better approach is to use global variables like $color-text-body and refer
to this variable everywhere you want to use it. This makes it easy to update
the color, as you only need change it in one place. It is also more
intention-revealing, as seeing the name $color-text-body is more descriptive
than #333 or black. Using color keywords can obfuscate this, as they look
like variables.