CODEWITHSUNDEEP
csssass
Victor
Victor

Reputation: 13388

SCSS multiple variables same value

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?

Upvotes: 7

Views: 9789

Answers (2)

Simon
Simon

Reputation: 3727

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.

Upvotes: 21

Christian
Christian

Reputation: 504

Don't use 4 variables, only use 1 if they have the same value

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

Upvotes: -5

Related Questions