[Sass/SCSS] 재활용(Mixins) - @content

Sass(SCSS) 재활용(Mixins) - @content

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

@content

 @mixin 믹스인이름() {
   스타일;
   @content;
 }

 @include 믹스인이름() {
   // 스타일 블록
   스타일;
 }

• 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;
  };
}   

• Compiled to:

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

• Mixin에게 전달된 스타일 블록은 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;
  }
}  

• Compiled to:

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