YoonStudyNote

@while @while은 조건이 false로 평가될 때까지 내용을 반복한다. while 문과 유사하게 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있다. 코드 길이가 단축된다는 장점이 있지만, 제대로 사용하지 않는다면 권장하지 않는다. @while 조건 { // 반복 내용 } $i: 6; @while $i > 0 { .item-#{$i} { width: 2px * $i; } $i: $i - 2; } .item-6 { width: 12px; } .item-4 { width: 8px; } .item-2 { width: 4px; } 주로 for 나 for-each를 사용하는걸 권장한다.

1. @each @each는 List와 Map 데이터를 반복할 때 사용한다. cf. List는 자바스크립트의 배열과 Map은 자바스크립트의 객체와 유사하다. for in 문과 유사하다. @each $변수 in 데이터 { // 반복 내용 } List 데이터를 반복해 보겠다. // List Data $fruits: (apple, orange, banana, mango); .fruits { @each $fruit in $fruits { li.#{$fruit} { background: url("/images/#{$fruit}.png"); } } } .fruits li.apple { background: url("/images/apple.png"); } .fruits li.orange { background: u..

@for @for는 스타일을 반복적으로 출력한다. Javascript for 문과 유사하다. @for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉜다. 두 형식은 종료 조건이 해석되는 방식이 다르다. // through // 종료 만큼 반복 @for $변수 from 시작 through 종료 { // 반복 내용 } // to // 종료 직전까지 반복 @for $변수 from 시작 to 종료 { // 반복 내용 } 차이점을 이해하기 위해 다음 예제를 살펴보자. 변수는 관례상 $i를 사용한다. * through와 to의 차이점 // 1부터 3번 반복 @for $i from 1 through 3 { .through:nth-child(#{$i}) { width : 20px * $i } } // ..