[SCSS] 05. At-Rules -03. 제어문

이번 포스트에서는 SCSS에서 사용되는 제어문들에 대해서 살펴보자. 

 

조건문

SCSS에서는 일반적으로 프로그래밍에서 상요되는 if, else 문장에 해당하는 at rule이 제공된다. 

@if @else if @else

@if는 조건에 부합되면 처리하기 위한 문장이고 필요 시 @else if, @else 를 추가해서 작성할 수 있다.

@if <expression<{
   . . .
} @else if<expression>{
   . . .
} @else{
  . . .
}

당연히 expression 항목이 true이면 해당 블록을 사용하고 그렇지 않은 경우는 사용하지 않는다. 간단한 문장이므로 바로 사용 예를 살펴보자.

@mixin triangle($color, $direction) {
  @if $direction ==up {
    border-bottom-color: $color;
  }  @else if $direction ==down {
    border-top-color: $color;
  }  @else {
    @error "Unknown direction #{$direction}.";
  }
}
.next {
  @include triangle(black, up);
}
.prev {
  @include triangle(green, down);
}

.next {
  border-bottom-color: black;
}

.prev {
  border-top-color: green;
}

scss에서는 triangle @mixin이 설정되어있는데 파라미터로 $direction을 받고 있다. 그리고 이 값에 따라서 border의 color가 방향별로 지정된다.

triangle @mixin을 .next와 .prev에서 사용하는데 .next는 $direction으로 up을, .next는 down을 넘겨준다. 이에 따라 생성된 css의 스타일을 살펴보자.

 

반복문

 

반복문으로는 @for, @each, @while이 제공된다. 완전 프로그램 언어 ㅎ

@for

@for는 숫자로 지정된 범위내에서 반복을 처리하기 위해서 사용되는데 두 번째 값의 포함 여부에 따라서 @for from to나 @for from through 구문을 사용한다.

@for <variable> from <expression_1> to <expression_2> {. . .} 
/*<variable>: 반복문 내에서 사용할 변수 명
  <expression_1>: 시작하는 숫자
  <expression_2>: 끝나는 숫자(exclude)*/
  
@for <variable> from <expression_1> through <expression_2> {. . .}
/*<expression_2>: 끝나는 숫자(inclusive)*/

@for를 사용하면 특히 nth-child 별로 다른 동작을 처리할 때 유용하다.

$base-color: blue;
@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    color: lighten($base-color, $i * 5%);
  }
}

ul:nth-child(3n+1) {
  color: #1a1aff;
}
ul:nth-child(3n+2) {
  color: #3333ff;
}
ul:nth-child(3n+3) {
  color: #4d4dff;
}

 

@each

@for가 index 기반으로 처리하는 반복문이라면 @each는 list나 map 형태의 자료구조가 가지는 요소를 순회할 때 사용된다. 마치 java의 advanced for 문장과 같다.

@each <item> in <list> {. . .} 
@each <key>, <value> in <map> {. . .}

먼저 리스트 자료구조를 활용한 예를 살펴보자.

$sizes: 40px, 50px;

@each $size in $sizes {
  .icon-#{$size} {
    height: $size;
    width: $size;
  }
}

.icon-40px {
  height: 40px;
  width: 40px;
}

.icon-50px {
  height: 50px;
  width: 50px;
}

 

$size는 리스트 형태의 변수 선언인데 특별한 것은 없고 요소들을 ,나 공백으로 구분해서 나열하면 된다. 여기서는 40px와 50px가 사용된다.

@each에서는 $sizes의 요소 하나 하나를 $size로 받아서 사용한다. .icon-#{$size}는 변수를 보간법으로 활용해서 selector를 구성하고있다. css style 블록에서도 $size를 활용하고 있다.

맵 타입의 자료구조를 사용할 때는 ()를 이용해서 묶어주면 되고 key:valeu 의 형태로 내용을 작성한다.

$colors: (error: red, info: blue);

@each $name, $color in $colors {
  .div-#{$name}:before {
    color: $color
  }
}

.div-error:before {
  color: red;
}

.div-info:before {
  color: blue;
}

@each에서 맵을 사용할 때는 $name, $color 형태로 $colors의 key:value를 할당해서 사용하면 된다.

@each 문장을 사용하면서는 destructuring 기능을 사용할 수 있는데 list 내부가 또다시 list 형태를 띄고 있는 sub list를 사용하는 방법이다. 

$infos: error red pink, warn yellow orange;

@each $name, $bg, $color in $infos {
  .span-#{$name} {
    background-color: $bg;
    color: $color;
  }
}

.span-error {
  background-color: red;
  color: pink;
}

.span-warn {
  background-color: yellow;
  color: orange;
}

$infos는 [error red pink]와 [warn yellow orange]를 요소로 가지는 배열이다. 그리고 각각의 요소들은 공백으로 구분되어있기 때문에 다시 3개의 요소를 가지는 배열이다.

@each에서는 $infos를 사용하면서 $name, $bg, $color 3개의 변수로 $infos 내부의 요소를 구조분해 해서 사용하고 있다.

 

@while

@while은 지정된 조전에 따라서 반복을 처리해야하는 경우에 사용된다.

@while <expression> {. . .}
/* <expression>: boolean을 나타내는 표현식 */

역시 바로 활용 예를 살펴보자. 앞서 살펴봤던 @for 형태를 @while로 변경해보면 다음과 같다.

$value: 3;
@while $value > 0{
  div:nth-child(3n + #{$value}){
    background-color: lighten($base-color, $value * 5%);
  };
  $value:$value - 1;
}

div:nth-child(3n+3) {
  background-color: #4d4dff;
}
div:nth-child(3n+2) {
  background-color: #3333ff;
}
div:nth-child(3n+1) {
  background-color: #1a1aff;
}