LearnBoost/stylus — Issue #539: Add iteration for variables, not just css statements
Author: pressfeeds
Created: 2012-01-26 22:18:31+00:00
State: open

Stylus allows you to iterate expressions via the for/in construct, but only for css statements as the output, e.g.

body
for num in 1 2 3
foo num

body {
foo: 1;
foo: 2;
foo: 3;
}

That's very useful, but I would like to also use a for/in construct for variables that I specify in a Stylus config file, e.g.

// Calculate width of main section (em)

main-width-1 = leading * num-columns-1 * (column-width-1 + column-gap)
main-width-2 = leading * num-columns-2 * (column-width-2 + column-gap)
main-width-3 = leading * num-columns-3 * (column-width-3 + column-gap)
main-width-4 = leading * num-columns-4 * (column-width-4 + column-gap)
main-width-5 = leading * num-columns-5 * (column-width-5 + column-gap)
main-width-6 = leading * num-columns-6 * (column-width-6 + column-gap)

As you can see, this is cumbersome and repetitive. I also have multiple blocks like this as I am specifying rules for six different resolutions in a responsive web application.

Ideally I'd like to do something like this:

for num in 1 2 3 4 5 6
main-width-{num} = leading * num-columns-{num} * (column-width-{num} + column-gap)

Would love to know if I've overlooked something or if this could be added to Stylus.

Many thanks, Rob