SASS color array
- by Eric Holmes
I am trying to write a loop that will cycle through colors and condense the amount of code in my scss file. Here is a simple example of what I have:
$color1: blue;
$color2: red;
$color3: white;
$color4: black;
.color1-bg { background-color: $color1; }
.color2-bg { background-color: $color2; }
.color1-border { border-color: $color1; }
.color2-border { border-color: $color2; }
And so on.
I am looking for a way to make the equivalent of a foreach loop, and cycle through an 'array' of colours by index. Something like this:
@each $color in $color1, $color2, $color3, $color4 {
.{$color}-bg { background-color: $color;
.{$color}-border { border-color: $color;
}
I know the syntax is wrong, but that is my thinking process. Thanks for the help!
