[SCSS] @for 반복문/ from ~through / from~ to

@for는 스타일을 반복적으로 출력한다.

@for $변수 from 시작 through 종료 {
}

관례적으로 숫자가 증가하는 변수 이름은 i나 index를 사용한다.

from ~through

i가 1부터 시작해서 3까지 반복을 한다.

그러면 3번 반복을 한다. 

through의 1번째 자식은 20px, 2번째 자식은 40px, 3번째 자식은 60px이다

 

from~to

두번째 코드는

1에서 3 전까지니까 2번반복한다.

 

주의할 점은 nth-child() 이 안에 괄호에 바로 $i를 넣는게 아니라

문자보관을 하는 표시인 #{}를 사용하여 넣어주어야한다.