@mixin
은 Sass
언어 전체에서 가장 많이 사용되는 기능 중 하나이다.
반복적인 작업을 손쉽게 할 수 있다.
mixin
을 선언할 때는 @mixin
지시자를 사용하며,
적용시 @include
지시자를 사용한다.
@mixin large-text($size: 30px) {
font-size: if($size<30px, 30px, $size);
color: blue;
}
위의 코드와 같이 인수 사용이 가능하다.
$size
의 초기값을 30px
로 설정을 한다.
따라서 인수를 넘기지 않을 경우 초기값으로 설정이 된다.
초기값 설정을 하지 않고 인수값을 넣지 않으면 에러가 발생한다.
.item {
@include large-text(10px);
// font-size: 30px;
// color-blue;
}
@mixin spread($p, $t, $r, $b, $l) {
#{$p}: {
top: $t;
right: $r;
bottom: $b;
left: $l;
}
}
.item {
$m: 10px 20px 30px 40px;
@include spread(margin, $m...);
}