스타일러스 프리 프로세서의 double for 루프

저는 스타일러스를 처음 사용하기 때문에 스타일러스 프리 프로세서를 사용하여 2 개의 루프를 반복하고 싶습니다. 이것은 내가 시도했지만, definitllyly 작동하지 않습니다.스타일러스 프리 프로세서의 double for 루프

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

그리고 코드는 25까지 계속됩니다. 아이디어는 격자 (5 x 5 Divs), 25 5 개의 사각형을 표시하는 것입니다.

.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

어떻게하면됩니까?

출처

2014-10-08 Fede

당신이 원하는 보여줄 수 코드 "후"두 번째 예에서 들여 쓰기를 수정? 바로 지금 당신이하고 싶은 것이 명확하지 않다. 예제의 두 번째 루프는 모든 선언을 하나의 규칙으로 던질 것이다. – kizu

http://stackoverflow.com/questions/22419626/how-to-iterate-through-a-double-for-loop-in-stylus –

위의 코드는 당신이 여기 달성을 할 수있는 하나의 방법입니다하려는 것입니다 경우

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

출처

2014-11-27 20:05:52

스타일러스 프리 프로세서의 double for 루프

답변

관련 문제