SCSS multiple variables same value
If you for some reason need them to hold the same value but need to keep them as separate variables for semantics or readability, or for enabling simple changes down the road you could just do this:
$a: #fff;
$b: $a;
$c: $a;
$d: $a;
I do this from time to time when dealing with colors that might change during the development process. Here's an example:
$background_color: white;
$text_color: #444;
$link_color: $text_color;
$overlay_color: rgba($background_color, 0.7);
This is useful since it will allow me to change the value of $text_color
and have $link_color
reflect the same changes, while at the same time being able to set $link_color
to something entirely different. Using only one variable for $text_color
and $link_color
alike would mean I'd have to manually look all instances over to see which relates to text and which relates to links. I think a good practice is to name you variables by what they're used for, i.e. $text_color
and $link_color
rather than $blueish_color
.