Question

I want…

I am trying to do a loop like this

my-red = #fcc
my-blue = #ccf

for color in my-red, my-blue
  .{color}
    color x

I want it to output

.my-blue {
  color: #ccf;
}
.my-red {
  color: #fcc;
}

I can’t seem to get both the variable name, and value as required

I have tried…

my-blue = #ccf
my-red = #fcc

for x in 'my-blue' my-red
  .{x}
    color x

But I just get either the class name or color name (depending on if I use a string as the variable name to iterate)

.my-blue {
  color: "my-blue";
}
. {
  color: #fcc;
}

Answer 1

You can use array for such task, so you can do this:

my-colors = my-red  #fcc,
            my-blue #ccf

for pair in my-colors
  .{pair[0]}
    color pair[1]

Doing so you declare the my-colors array and then iterate through it, using the first elements in the pairs as the names and second as the value.