#25 - 반복문 (@while)

@while

조건이 false가 될 때 까지 내용을 반복한다. false가 되지 않으면 무한 루프에 빠질 수 있다.

SCSS 기본 구조

@while 조건{
    /* 반복 내용 */
}

SCSS

$i : 3;

@while $i > 0{
    .class-#{$i} {
     width : 10px * $i;
    }
    $i : $i - 1;
}

Compile 된 CSS

.class-3{
    width : 30px;
}
.class-2{
    width : 20px;
}
.class-1{
    width : 10px;
}