Question

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 write a loop so that when I use the variable to generate the class, it has the name of the variable rather than its value:

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

Answer 1

You can’t access the name of the variable directly, you’d have to store it as an additional value.

Sass 3.2 and older (list of lists)

Sass doesn’t have mappings yet, so the next best thing is a list of lists.

$color1: ('color1', blue);
$color2: ('color2', red);
$color3: ('color3', white);
$color4: ('color4', black);

@each $color in $color1, $color2, $color3, $color4 {
    $name: nth($color, 1);
    $value: nth($color, 2);
    .#{$name}-bg { background-color: $value; }
    .#{$name}-border { border-color: $value; }
}

Sass 3.3 and newer (mappings)

Starting with 3.3, you have access to mappings. It’s functionally the same as the list of lists, but syntactically more concise.

$colors:
    ( 'color1': blue
    , 'color2': red
    , 'color3': white
    , 'color4': black
    );

@each $name, $value in $colors {
    .#{$name}-bg { background-color: $value; }
    .#{$name}-border { border-color: $value; }
}

Alternately

Or if your color names are really “color1”, “color2”, etc., you can also just construct the name on the fly rather than specifying them explicitly:

$color1: blue;
$color2: red;
$color3: white;
$color4: black;

$num: 0;
@each $color in ($color1, $color2, $color3, $color4) {
    $num: $num + 1;
    .color#{$num}-bg { background-color: $color; }
    .color#{$num}-border { border-color: $color; }
}