@content
@mixin
내부에 @content
가 있으면 해당 부분의 컨텐츠(스타일)을 블록형태로 전달한다.@content
로 속성을 추가한 경우style.scss
@mixin border-radius($radius) {
border-radius: $radius;
@content;
}
.box {
@include border-radius(10px) {
border-style: dotted;
}
}
style.css
.box {
border-radius: 10px;
border-style: dotted;
}
@content
를 이용해서 추가할 경우 아래와 같이 @include
가 있는 선택자에 바로 CSS 속성을 추가해도 컴파일된 CSS 코드는 동일하다.style.scss
@mixin border-radius($radius) {
border-radius: $radius;
}
.box {
@include border-radius(10px);
border-style: dotted;
}
style.css
.box {
border-radius: 10px;
border-style: dotted;
}
@content
로 선택자, 속성을 함께 컨텐츠 블록으로 전달하는 경우style.scss
@mixin sample {
@content;
}
@include sample {
.add {
color: crimson;
}
}
@content
에 의해 @include
내에 .add
선택자와 .add
선택자가 가진 모든 속성이 CSS 선택자로 컴파일 된다.
style.css
.add {
color: crimson;
}
@content
로 부모요소에 자식요소 구조의 형태로 선택자와 속성을 함께 컨텐츠 블록으로 전달하는 경우style.scss
@mixin sample {
.frame {
border: 1px solid black;
width: 200px;
height: 200px;
@content;
}
}
@include sample {
.add {
color: crimson;
background-color: yellowgreen;
&:hover {
color: royalblue;
}
}
}
@content
에 의해 @include
내에 .add
선택자와 .add
선택자가 가진 모든 속성이 @mixin
내부의 .frame
선택자의 자식 요소로 컴파일 되면서 전달됨
style.css
.frame {
border: 1px solid black;
width: 200px;
height: 200px;
}
.frame .add {
color: crimson;
background-color: yellowgreen;
}
.frame .add:hover {
color: royalblue;
}