<div class="container">
<div class="item">
Mixin
</div>
</div>
.container {
width: 200px;
height: 200px;
background-color: orange;
display: flex;
justify-content: center;
align-items: center;
}
.container .item{
width: 100px;
height: 100px;
background-color: royalblue;
display: flex;
justify-content: center;
align-items: center;
}
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include center;
width: 200px;
height: 200px;
background-color: orange;
.item {
@include center;
width: 100px;
height: 100px;
background-color: royalblue;
}
}
@mixin box($size) {
width: $size;
height: $size;
background-color: tomato;
}
.container {
@include box(200px);
.item {
@include box(100px);
}
}
.box {
@include box(300px);
}
@mixin box($size: 100px) {
width: $size;
height: $size;
background-color: tomato;
}
.container {
@include box(200px);
.item {
@include box;
}
}
.box {
@include box;
}
@mixin box($size: 100px, $color: tomato) {
width: $size;
height: $size;
background-color: $color;
}
.container {
@include box(200px, red);
.item {
@include box;
}
}
.box {
@include box;
}
인수가 2개니까 매개변수도 2개를 적어야하는데 첫번째 값이 기본값일 때, 굳이 적지 않아도 되니까 green만 적는다면 width,height도 green이 되어버린다. 그럴때 사용하는 것이 키워드 인수다.
@include box($color: green);
@mixin box($size: 100px, $color: tomato) {
width: $size;
height: $size;
background-color: $color;
}
.container {
@include box(200px, red);
.item {
@include box($color: green);
}
}
.box {
@include box;
}