[scss] @for ~ through / to 차이점

scss의 @for를 이용하면 반복적인 구문을 쉽게 처리할 수있다.
인강에선 @for ~ through로 설명을 했는데 vs코드의 자동완성 코드는 @for ~ to였다.
어떤 차이점이 있는걸까?

@for 기본 사용법

 $var : 변수명

<start> : 시작하는 숫자와
<end> : 끝나는 숫자

for ~ through

end로 지장한 숫자까지 반복

• scss

  @for $i from 1 through 5 {
    .box:nth-child(#{$i}) {
      width: 100px * $i;
    }
  }

• css

  .box:nth-child(1) { width: 100px; }
  .box:nth-child(2) { width: 200px; }
  .box:nth-child(3) { width: 300px; }
  .box:nth-child(4) { width: 400px; }
  .box:nth-child(5) { width: 500px; }

for ~ to

end로 지장한 숫자-1까지 반복

• scss

  @for $i from 1 to 5 {
    .box:nth-child(#{$i}) {
      width: 100px * $i;
    }
  }

• css

  .box:nth-child(1) { width: 100px; }
  .box:nth-child(2) { width: 200px; }
  .box:nth-child(3) { width: 300px; }
  .box:nth-child(4) { width: 400px; }

솔직히 to가 왜있는지 모르겠다 😅
scss가 자바스크립트랑 비슷한 개념이 많다보니까 js for문의 0인덱스에 익숙한 개발자들을 위해서 나온걸까?
나는 주로 through를 이용해서 코딩하는 습관을 길러야겠다.
(to / through를 동시다발적으로 사용하면 나중에 리뷰할 때 헷갈릴 것 같다.)