[Sass 특징] @for 반복문

Sass 문법은 일반적인 자바스크립트 문법과 같이

조건문 반복문과 같은 문법을 사용하여 css를 작성할 수 있다.

 

Sass 문법에서 사용하는 for문에 대해 알아보려한다.

 

1. @for 문의 사용

기본적으로 Sass의 다른 문법 및 함수 사용과 마찬가지로 @(골뱅이) 문자와 함께 for문을 사용한다.

@for 변수 from (시작 숫자) to (끝 숫자){...}

의 형태로 작성하고 to 대신 through를 작성할 수 있다. 

to와 through의 차이는 포스팅 하단에 예시를 통해 다룰 것이다.

 

위의 @for 문 작성 형식을 통해 예시를 보이자면

/* SCSS */
@for $i from 1 to 3{
  .icon_#{$i}{
    background-position:0 ($i * -10px);
  }
}


/* CSS */
.icon_1{background-position:0 -10px;}
.icon_2{background-position:0 -20px;}

위와 같이 작성하고 컴파일 되는 것을 확인할 수 있다.

$i라는 임의의 변수와 함께 반복될 범위의 숫자를 입력해서 사용한다.

 

@for 문을 작성할 때 변수는 보간법으로 처리해야 컴파일 에러가 발생하지 않는다.

2021.04.01 - [Frontend/Sass (SCSS)] - [Sass 특징] Interpolation (보간법, #{})

 

 

 

2. @for $var from ~ to ~ {...}

@for 반복문의 사용은 크게 from~to와 from~through 2가지 방법이 있다.

그 중 to의 경우 to 뒤에 나오는 숫자 미만의 반복되는 값을 사용한다. (해당 숫자 비포함)

/* SCSS */
@for $i from 0 to 5{
  .animal_#{$i}{
    background-position:0 ($i * -10px);
  }
}


/* CSS */
.animal_0{background-position:0 0;}
.animal_1{background-position:0 -10px;}
.animal_2{background-position:0 -20px;}
.animal_3{background-position:0 -30px;}
.animal_4{background-position:0 -40px;}

 

3. @for $var from ~ through ~ {...}

두 번째 방법인 through을 사용하는 방법은

through 뒤에 나오는 숫자 이하로 반복되는 값을 사용한다. (해당 숫자 포함)

/* SCSS */
@for $i from 0 through 5{
  .animal_#{$i}{
    background-position:0 ($i * -10px);
  }
}


/* CSS */
.animal_0{background-position:0 0;}
.animal_1{background-position:0 -10px;}
.animal_2{background-position:0 -20px;}
.animal_3{background-position:0 -30px;}
.animal_4{background-position:0 -40px;}
.animal_5{background-position:0 -50px;}

다른 소스는 2번의 to와 같지만 to -> through만 달라졌는데

컴파일되는 css값은 .animal_5이 하나 더 출력이 되었다.

 

이처럼 내가 원하는 범위만큼의 숫자를 출력하기 위해서는

to와 through의 사용시 차이점에 대해 익히고 사용할 필요가 있을 것 같다.

 

 

 

---

참고

sass-lang.com/documentation/at-rules/control/for