Stylus, refer to variable name and value

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

Mousetrap

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.

Feldt

Thanks, but I can't seem to get it to work on the stylus test page: learnboost.github.com/stylus/try.html – Mousetrap

This test page have somewhat old version of stylus, it doesn't allow multiline variable declaration. So just replace the first lines of my snippet to my-colors = my-red #fcc, my-blue #ccf and you'll see it would work. And the actual master branch (or the current version in npm) should render this perfectly without any changes. – Feldt

it worked! big thanks for figuring this out a long time after I asked the question. – Mousetrap