재활용 - Content

@content

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

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

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

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

.box1 {
    @include icon("image/icon.png");
}

.box2{
    @include icon("image/icon2.png"){
        display: block;
        position: absolute;
        width: 100px;
        height: 100px;
    };
}

.box1::after {
  content: "image/icon.png";
}

.box2::after {
  content: "image/icon2.png";
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
}

이렇게 @content를 추가하게 되면 내가 추가하고싶은 요소를 더 넣을 수 있고, 원하지 않으면 추가 안해도 컴파일 하는데 전혀 문제가 없다.