mixin
으로 선언한 후, 사용시에는 @include
를 이용함.
@mixin title {
font-weight: bold;
font-size: 60px;
color: mediumaquamarine;
}
.title {
@include title;
}
ex>
<div class="container">
<h1 class="title">Hello <span>yjin!</span></h1>
</div>
<div class="news">
<h1 class="news-title">News Headline is <span>HERE</span>!</h1>
</div>
@mixin title {
text-align: center;
position: relative;
font-size: 60px;
padding: 10px;
span {
color: royalblue;
}
&::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 8px;
background-color: darkgrey;
}
}
.title {
@include title;
}
.news-title {
@include title;
}
믹스인 선언부는 항상 위에 있어야 한다!
-> 먼저 사용하면 오류가 발생한다.
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
// Button Mixin
@mixin default-button {
padding: 8px 20px;
width: 120px;
font-size: 16px;
background-color: #fff;
border-radius: 8px;
outline: none;
cursor: pointer;
}
.button-group {
.btn {
@include default-button;
&.complete {
border: 3px solid green;
color: green;
}
&.loading {
border: 3px solid royalblue;
color: royalblue;
}
&.error {
border: 3px solid crimson;
color: crimson;
}
}
}
// Button Mixin
@mixin default-button {
padding: 8px 20px;
width: 120px;
font-size: 16px;
background-color: #fff;
border-radius: 8px;
outline: none;
cursor: pointer;
transition: 0.2s;
&.complete:hover {
background-color: skyblue;
color: white;
}
&.loading:hover {
background-color: royalblue;
color: white;
}
&.error:hover {
background-color: crimson;
color: white;
}
}
.btn {
&.complete {
@include default-button;
border: 3px solid skyblue;
color: skyblue;
}
&.loading {
@include default-button;
border: 3px solid royalblue;
color: royalblue;
}
&.error {
@include default-button;
border: 3px solid crimson;
color: crimson;
}
}
// Buttons Mixin
@mixin border-style($width, $style, $color) {
border: $width $style $color;
}
.btn {
@include border-style(2px, solid, #0066ff);
}
$
기호를 붙여줘야 한다.// Buttons Mixin
@mixin border-style($width, $style, $color) {
border: $width $style $color;
}
@mixin button-padding($updown, $leftright) {
padding: $updown $leftright;
}
.btn {
width: 200px;
outline: none;
background-color: #fff;
cursor: pointer;
border-radius: 4px;
font-size: 18px;
@include button-padding(10px, 40px);
&.approval {
@include border-style(2px, solid, skyblue);
}
&.reject {
@include border-style(2px, solid, crimson);
}
}
.btn {
width: 200px;
padding: 10px;
font-size: 18px;
border-radius: 8px;
outline: none;
cursor: pointer;
border: 1px solid #000;
}
.another {
// .btn 선택자의 스타일 모두 가져옴
@extend .btn;
}
@extend
와 함께 사용 <div class="card">
<div class="card-item">card item #01</div>
<div class="card-item">card item #02</div>
<div class="card-item">card item #03</div>
</div>
아래에 .shape라는 플레이스 홀더 선택자를 만들고,
@extend로 그대로 가져다 쓰는 경우,
css로 컴파일 될때 .shape가 그대로 남게 된다.
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.card {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.shape {
width: 250px;
height: 300px;
border-radius: 20px;
box-shadow: 0 0 5px 8px #00000010;
display: flex;
justify-content: center;
align-items: center;
}
.card {
&-item {
@extend .shape;
}
}