CODEWITHSUNDEEP
cssstylus
Fede
Fede

Reputation: 1716

double for loop in stylus preprocessor

I'm new to stylus and I want to iterate 2 for loops using stylus preprocessor. This is what I tried, but definitlly not working.

.mask:nth-child(1)::after {
  top: 0;
  left: 0;
  height: 20;
  width: 20;
}
.mask:nth-child(2)::after {  
  top: 20;
  left: 20;
  height: 20;
  width: 20;
}
.mask:nth-child(3)::after {  
  top: 40;
  left: 40;
  height: 20;
  width: 20;
}
.mask:nth-child(4)::after {  
  top: 60;
  left: 60;
  height: 20;
  width: 20;
}
.mask:nth-child(5)::after {  
  top: 80;
  left: 80;
  height: 20;
  width: 20;
}
.mask:nth-child(6)::after {  
  top: 20;
  left: 0;
  height: 20;
  width: 20;
}

and the code continues until 25. The idea is to have a grid displayed (5 x 5 Divs), 25 five squares. 

 .mask
        position absolute
    for i in (0..24)    
        .mask:nth-child({i})::after 
    for j in (0..4)                     
        top 20 * j
        left 20 * j 
        height 20 * j 
        width 20 * j

How can I achieve this ?

Upvotes: 0

Views: 266

Answers (1)

Alexander Futekov
Alexander Futekov

Reputation: 150

If the code above is what you're trying to achieve here's one way to do it:

.mask
  position: absolute
  for i, j in (1..25)
    &:nth-child({i})::after
      top: 20 * j
      left: 20 * j
      height: 20
      width: 20

Upvotes: 2

Related Questions