#23 - 반복문 (@for)

반복문 - @for

@for 반복문은 through / to / from 와 함께 사용한다.

 

@for + from + through

form부터 through 까지 반복한다.

SCSS 기본 구조

@for $변수 from 시작 through 종료{
    /* 반복 내용 */
}  

SCSS

$i(=$index)는 숫자 증가/감소의 경우 관례적으로 사용된다. 즉, 아래 코드에서는 '1부터 5까지 증가하여 반복하라'를 실행하는 것이다.

 

/* nth-child의 괄호는 문자 보간#{} 을 사용한다 */
@for $index from 1 through 5{
    .class:nth-child(#{$index}){
        width : 10px * $index;
    }
}

Compile 된 CSS

.class:nth-child(1){
    width : 10px;
}
.class:nth-child(2){
    width : 20px;
}
.class:nth-child(3){
    width : 30px;
}
.class:nth-child(4){
    width : 40px;
}
.class:nth-child(5){
    width : 50px;
}

 

@for + from + to

form부터 to 이전 까지 반복한다.

SCSS 기본 구조

@for $변수 from 시작 to 종료{
    /* 반복 내용 */
}

SCSS

아래 코드에서는 '1부터 5 이전까지 증가하여 반복하라'를 실행하는 것이다.

 

/* nth-child의 괄호는 문자 보간 #{}을 사용한다 */
@for $index from 1 to 5{
    .class:nth-child(#{$index}){
        width : 10px * $index;
    }
}

Compile 된 CSS

.class:nth-child(1){
    width : 10px;
}
.class:nth-child(2){
    width : 20px;
}
.class:nth-child(3){
    width : 30px;
}
.class:nth-child(4){
    width : 40px;
}