[Sass] @content - 스타일 블록화

@content가 포함된 영역이 스타일 블록이 된다.
이 방식을 사용하여 기존 Mixin이 가지고 있는 기능에 선택자나 속성 등을 추가할 수 있다.

@mixin icon($url) {
  &::after {
    display: block;
    content: $url;
    @content;
  }
}
.icon1 {
  @include icon("/images/icon.png");
}
.icon2 {
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

 

.icon1::after {
  display: block;
  content: "/images/icon.png";
}

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

---

[공부 좌표]

Sass

Sass(SCSS) 완전 정복!