선언된 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;
}