[SCSS] @each, @content

@each

SCSS 내에서는 list와 map 데이터를 사용할 수 있다.
이러한 list, map 데이터를 다루기 위해서는 @each라는 키워드를 사용한다.

list 데이터

$list 변수에 있는 데이터들을 반복적으로 $c 변수에 담아서 처리하겠다는 의미이다.

$list: orange, royalblue, yellow;

@each $c in $list {
  .box {
    color: $c;
  }
}

CSS로 컴파일한 결과는 아래와 같다.

.box {
  color: orange;
}
.box {
  color: royalblue;
}
.box {
  color: yellow;
}

map 데이터

map은 list와 다르게 key, value 형태로 변수를 만들어낼 수 있다.

$map: (
  o: orange,
  r: royalblue,
  y: yellow
);

@each $key, value in $map {
  .box-#{$key} {
    color: $value;
  }
}

CSS로 컴파일한 결과는 아래와 같다.

.box-o {
  color: orange;
}
.box-r {
  color: royalblue;
}
.box-y {
  color: yellow;
}

@content

mixin 내부에 @content 라는 키워드를 입력하면 mixin을 호출할 때 블록을 추가하고 해당 블록 내부에 있는 내용을 추가할 수 있다.

$color-text-white: #fff;

@mixin style-link-text($col) {
  text-decoration: none;
  text-transform: uppercase;
  color: $col;
  @content;
}

.btn-main {
  @include style-link-text($color-text-white) {
    margin: auto;
  }
}

CSS 컴파일 결과는 아래와 같다.

.btn-main {
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  margin: auto;
}