CODEWITHSUNDEEP
cssstylus
Lucas Henrique
Lucas Henrique

Reputation: 156

Is it possible to loop a counter in a property using Stylus?

I'm trying to create multiple columns without creating one by one using Stylus. That's what I've done so far:

for i in (1..2)
   .column-{i}
      /* random-prop */

The compiled version of the code showed:

.column-1 { /* random-prop */ }
.column-2 { /* random-prop */ }

I've tried to create multiple variables like those above (just for testing):

column-size-1 = 100%
column-size-2 = 50%

But when I try to do the same thing I've done before:

for i in (1..2)
   .column-{i}
      width column-size-{i}

It doesn't work and I don't know why (I'm trying to learn something new and Stylus appeared).

What is the better way to create multiple columns in Stylus, avoiding many replications?

Upvotes: 1

Views: 284

Answers (2)

user4994625
user4994625

Reputation:

If I may make a correction: the arrays start at zero so you have to write:

colors = #f00, #0f0
for i in (0..1)
   .column-{i}
      background colors[i]

You can enhance the loop using the colors variable instead number to loop through the array, this way if values are added to the list don't have to change the number in the loop.

Stylus

colors = #f00, #0f0, #000
for color, i in colors
  i=i+1
  .column-{i}
    background color

Output

.column-1 {
  background: #f00;
}
.column-2 {
  background: #0f0;
}
.column-3 {
  background: #000;
}

Upvotes: 1

Lucas Henrique
Lucas Henrique

Reputation: 156

Found a answer... I've created an array (that was hard to find in Documentation) and called it in loop, example:

colors = #f00, #0f0
for i in (1..2)
   .column-{i}
      background colors[i]

Upvotes: 0

Related Questions