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!