[Sass/SCSS] 반복문 사용하기 (@for $변수 from 시작점 through 끝점)

#작성법

- 반복문은 다음과 같은 형식으로 사용할 수 있다. 

@for $변수 from 시작점 through 끝점 {
	...	
}

@for $i from 1 through 4 {   // i는 변수명, 변수명은 뭘 쓰던 상관 없다. // 1부터 4까지 반복
    // @debug $i;   // @debug 사용시, 터미널에서 디버그 결과를 확인할 수 있음
    .col-sm-#{$i} {   // 클래스이름에 변수 사용시, #{}에 변수명을 감싸줘야한다.
      width: 100% / $i;
    }
}

- scss에서 위 코드와 같이 작성 시, css에서는 다음과 같이 랜더링 된다.

.col-sm-1 {
  width: 100%; }

.col-sm-2 {
  width: 50%; }

.col-sm-3 {
  width: 33.33333%; }

.col-sm-4 {
  width: 25%; }