TIL | SCSS @content(스타일 블록)

선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달 할 수 있다.
이 방식을 사용하여 기존 Mixin이 가지고 있는 기능에 선택자나 속성 등을 추가할 수 있다.

 @mixin mixinname() {
  style;
  @content;
}

@include mixinname() {
  // style block
  style;
}

SCSS

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}

.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}

.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  }
}

⬇️
CSS

.icon1 {
  content: "/images/icon.png"
}

.icon2 {
  content: "/images/icon.png"
  position: absolute;
}

Mixin에 전달된 스타일 블록은 Mixin의 범위가 아니라 스타일 블록이 정의된 범위에서 평가된다.
즉, 매개변수는 전달된 스타일 블록 안에서 사용되지 않고 전역 값으로 해석된다.
Global Variables(전역 변수)와 Local Variables(지역 변수)를 생각하면 좀 더 쉽다.

SCSS

$color: red;

@mixin colors($color: blue) {
  // Mixin의 범위
  @content;
  background-color: $color;
  border-color: $color;
}

div {
  @include colors() {
    // 스타일 블록이 정의된 범위
    color: $color;
  }
}

⬇️
CSS

div {
  color: red;
  background-color: blue;
  border-color: blue;
}