How to increment a variable in Scss with a for loop? [duplicate] - variables

Question

This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
Pretty sure this isn't possible with Sass/Scss but want to be certain that this is a limitation of Sass rather than my own misunderstanding of the syntax...
I'm trying to create a list of styles where each list item gets a different color assigned from a bunch of variables:
$color1: #FF0000; // Red
$color2: #FFBF00; // Orange
$color3: #FFFF00; // Yellow
$color4: #7FFF00; // Green
$color5: #007FFF; // Light Blue
$color6: #00FFFF; // Cyan
$color7: #0000FF; // Blue
$color8: #7F00FF; // Purple
$color9: #FF00FF; // Magenta
#for $i from 1 through 9 {
a[href^="link#{$i}"] { color: $color#{$i};
}
}
However, the Sass won't compile. I'm thinking it's just not possible to increment the variable name in this manner. Can anyone confirm?

Answer 1

You can't create variable names in a dynamic way, but you can achieve this with even better semantics and flexibility:
$red : #FF0000;
$orange : #FFBF00;
$yellow : #FFFF00;
$green : #7FFF00;
$lightblue : #007FFF;
$cyan : #00FFFF;
$blue : #0000FF;
$purple : #7F00FF;
$magenta : #FF00FF;
$colors: $red $orange $yellow $green $lightblue $cyan $blue $purple $magenta;
#each $color in $colors {
$i: index($colors, $color);
a[href^="link#{$i}"] { color: $color; }
}
UPDATE: In Sass 3.3, you can use a map for less repetition.
$colors: (
red : #FF0000,
orange : #FFBF00,
yellow : #FFFF00,
green : #7FFF00,
lightblue : #007FFF,
cyan : #00FFFF,
blue : #0000FF,
purple : #7F00FF,
magenta : #FF00FF,
);
#each $name, $color in $colors {
a[href^="link#{$name}"] { color: $color; }
}