Discussion on: A cool way to handle scss color variables

[Thibaut Allender]

Interesting but this is just highlighting the issue with naming colours after their aspect.
$dark and $light shouldn't be used in the first place.

That being said, if you really want to force using specific backgrounds and colours together, maybe a mixin would be a better approach. Pass the colour name you want for the background, and the mixin will output the correct foreground. That way you really make sure nobody messes things up.

Also I would really recommend namespacing variables. For example, $background should be $color-background. That makes it way easier to find where you used ANY colour variable, and you avoid conflicts by re-using a colour variable by mistake for something else.

[Nicola]

That's a nice tip, this example focuses only on naming variables, of course, you might use a mixin to handle them because is the best way to.

I don't use the color- prefix because I use them often by a SCSS map which defines a colour prefix for variables, for example:

$colours: (
  $background: black,
  $on-background: white
);

anyway thanks for the suggestion this might be really useful 🤞

[Thibaut Allender]

Well I thought about talking about maps too :-)
I rarely use them because it's just too much of a pain to read them back.
$colour-background is way easier to type (and read) than map.get($colours, "background")