@mixin
@mixin
기본 문법@mixin
선언하기@mixin 믹스인 이름 {
재사용 스타일 속성
}
index.html
<h1 class="heading">
Welcome <span>Jieun</span> Blog
</h1>
style.scss
@mixin heading {
text-align: center;
position: relative;
padding-bottom: 20px;
span {
color: royalblue;
}
&::before {
content: '';
position: absolute;
width: 100px;
height: 4px;
background-color: chocolate;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
@mixin
으로 선언한 스타일은 @include
로 사용하기 전까지 컴파일 되지 않는다.
@mixin
사용하기@mixin
으로 정의해 만든 CSS 스타일을 @include
을 이용하여 참조해서 재사용할 수 있다.
선택자 {
@include 믹스인 이름
}
style.scss
@mixin heading {
text-align: center;
position: relative;
padding-bottom: 20px;
span {
color: royalblue;
}
&::before {
content: '';
position: absolute;
width: 100px;
height: 4px;
background-color: chocolate;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
.heading {
@include heading;
}
style.css
.heading {
text-align: center;
position: relative;
padding-bottom: 20px;
}
.heading span {
color: royalblue;
}
.heading::before {
content: "";
position: absolute;
width: 100px;
height: 4px;
background-color: chocolate;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.SCSS
에서 @mixin
으로 선언된 CSS는 어떠한 선택자에도 @include
를 통해 재사용할 수 있다.
style.scss
@mixin heading {
text-align: center;
position: relative;
padding-bottom: 20px;
span {
color: royalblue;
}
&::before {
content: '';
position: absolute;
width: 100px;
height: 4px;
background-color: chocolate;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
.frame {
@include heading;
}
style.css
.frame {
text-align: center;
position: relative;
padding-bottom: 20px;
}
.frame span {
color: royalblue;
}
.frame::before {
content: "";
position: absolute;
width: 100px;
height: 4px;
background-color: chocolate;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
@mixin
을 매번 만드는 것 보다는 파일을 따로 만들어 자주 사용하는 그룹을 @mixin
으로 여러 개 만들어 놓고 .SCSS
에서 @import
로 불러오면 mixin.scss
파일 안에 미리 세팅된 믹스인들을 활용할 수 있다.
mixin.scss
@mixin default {
font-size: 15px;
margin: 0;
color: #333;
background-color: #fff;
list-style: 1.6em;
}
style.scss
@import './mixin.scss';
body {
@include default;
}
style.css
body {
font-size: 15px;
margin: 0;
color: #333;
background-color: #fff;
list-style: 1.6em;
}
@mixin
+ @include
@include
로 @mixin
을 사용하면서 추가적인 CSS를 사용할 수 있다.@mixin
을 사용할 수 있다.@mixin
과 @include
를 활용하여 의미에 따른 여러가지 버튼 디자인을 만들어보자.
index.html
<div class="frame">
<button class="complete">완료</button>
<button class="loading">전송중</button>
<button class="error">오류</button>
</div>
style.scss
@mixin notice-button {
font-size: 15px;
width: 120px;
padding: 7px;
background-color: #fff;
cursor: pointer;
}
.complete {
@include notice-button;
border: 1px solid royalblue;
color: royalblue;
}
.loading{
@include notice-button;
border: 1px solid green;
color: green;
}
.error {
@include notice-button;
border: 1px solid red;
color: red;
}
style.css
.complete {
font-size: 15px;
width: 120px;
padding: 7px;
background-color: #fff;
cursor: pointer;
border: 1px solid royalblue;
color: royalblue;
}
.loading {
font-size: 15px;
width: 120px;
padding: 7px;
background-color: #fff;
cursor: pointer;
border: 1px solid green;
color: green;
}
.error {
font-size: 15px;
width: 120px;
padding: 7px;
background-color: #fff;
cursor: pointer;
border: 1px solid red;
color: red;
}
@mixin
에 매개변수, 인수를 사용할 수 있다.$매개변수
개수, 인수 개수, 값 개수와 순서를 반드시 맞춰야 한다.@mixin 믹스인 이름($매개변수, $매개변수, $매개변수) {
CSS 속성 : 인수1 인수2 인수3
}
@include 믹스인 이름(값1, 값2, 값3)
index.html
<div class="buttons">
<button class="approval">승인</button>
<button class="refuse">거절</button>
</div>
style.scss
@mixin border-style($width, $style, $color){
border: $width $style $color;
}
.buttons {
button {
width: 200px;
padding: 7px;
background-color: #fff;
font-size: 18px;
&.approval {
@include border-style(1px, solid , crimson)
}
&.refuse {
@include border-style(1px, dashed , royalblue)
}
}
}
style.css
.buttons button {
width: 200px;
padding: 7px;
background-color: #fff;
font-size: 18px;
}
.buttons button.approval {
border: 1px solid crimson;
}
.buttons button.refuse {
border: 1px dashed royalblue;
}
고수