[SCSS]작성법 7 - 반복문 사용하기 (@while)

2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 6 - 배열을 이용해 맵핑하기 (@each)

 

아래와 같이 @while 키워드를 이용해 반복문을 정의합니다.

$x: 1;
@while $x < 6 {
  .text-#{$x} { font-size: $x*10px;}
  $x: $x + 1;
}

 

위의 코드는 아래와 같은 의미를 가집니다.

.text-1 {font-size 10px; }

.text-2 {font-size 20px; }

.text-3 {font-size 30px; }

.text-4 {font-size 40px; }

.text-5 {font-size 50px; }

 

2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 8 - 다른 .sass파일 가져오기 (@ import)