SCSS multiple variables same value

Question

If I have this SCSS/SASS:

$a: #fff;
$b: #fff;
$c: #fff;
$d: #fff;

Is there any shortcut for this? In other words, how do I easily assign the same value to multiple variables?

Answer 1

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.