SCSS multiple variables same value

Question

If I have this SCSS:

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

Is there a shortcut for this?

Answer 1

If for some reason you need them to keep the same value, but to save them as separate variables for semantics or readability, or to enable simple changes along the way, you could just do this:

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

I do this from time to time when it comes to colors that can change during the development process. Here is an example:

 $background_color: white; $text_color: #444; $link_color: $text_color; $overlay_color: rgba($background_color, 0.7); 

This is useful because it will allow me to change the value of $text_color and $link_color reflect the same changes, and at the same time set $link_color to something completely different. Using only one variable for $text_color and $link_color equivalent, I will have to manually look through all instances to see what applies to the text and refers to links. I believe that it’s good practice to name the variables by what they are used for, i.e. $text_color and $link_color , not $blueish_color .

Answer 2

Do not use 4 variables, use only 1 if they have the same value

 $a: #fff; $a: #fff; $a: #fff; $a: #fff;