UNPKG

learn-sass

Version:

Learn SASS and SCSS through a workshopper adventure.

29 lines (20 loc) 965 B
# WHILE 반복문 `@while` 지시어는 Sass 스크립트 표현을 사용하여, 중첩 형식의 스타일을 반복적으로 출력합니다. 조건문이 거짓이 될 때까지요. `@for`문 보다 더 복잡한 형식의 반복문을 작성할 수 있습니다. 그렇게 많이 필요로 하는 장면은 없지만요. 예를 보시죠. ```scss $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } ``` 컴파일되는 CSS입니다. ```css .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; } ``` # 과제 `@while` 지시어를 사용하여 `h1`부터 `h6`까지의 요소를 만드세요. 각 요소는 `font-size` 스타일을 갖고 있고 값은 `24px`에서 `3px` 곱하기 헤딩 레벨의 숫자를 뺀 값입니다. 예를 들어 헤딩 레벨이 `h1` 이라면 `font-size`의 값은 `24px - 3px * 1`가 되어 `21px`가 할당됩니다. 이전 과제인 `@for` 반복문과 비교해 보세요.