[Scss] Scss 제어문

switch / case 문은 sass에서 지원되지 않는다.

 

@if / @else

조건식의 괄호는 필수가 아니라 상황에 따라 넣거나 넣지 않는다.

 

---

@for문

SCSS

동일한 이미지와 클래스를 반복으로 나타나게 할때에도 for문은 유용하게 사용된다.

@for $i from 1 through 6 {
        &.mv#{$i} {
          background-image: url(../img/mv#{$i}.jpg);
        }
      }

CSS로 변환된 모습

.visual .visual_slider li.mv1 { background-image: url(../img/mv1.jpg); }
.visual .visual_slider li.mv2 { background-image: url(../img/mv2.jpg); }
.visual .visual_slider li.mv3 { background-image: url(../img/mv3.jpg); }
.visual .visual_slider li.mv4 { background-image: url(../img/mv4.jpg); }
.visual .visual_slider li.mv5 { background-image: url(../img/mv5.jpg); }
.visual .visual_slider li.mv6 { background-image: url(../img/mv6.jpg); }

 

---

@each

@each $변수명 in

맵이나 리스트형의 변수 사용할때 주로 사용한다.

리스트 값에 개수에 따라 출력한다.

 

---

@while문