Я пытаюсь написать цикл, который будет перебирать цвета и сокращать объем кода в моем файле scss. Вот простой пример того, что у меня есть:

$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; }

И так далее.

Я ищу способ написать цикл, чтобы при использовании переменной для генерации класса она имела имя переменной, а не ее значение:

@each $color in $colour1, $colour2, $colour3, $colour4 {
    .#{$color}-bg { background-color: $color; }
    .#{$color}-border { border-color: $color; }
}