Mixin
- Mixin을 사용하면 스타일시트 전체에서 재사용할 수 있는 CSS스타일을 정의할 수 있다.
1. Mixin 정의
@mixin mixin-name {
// css code
}
@mixin mixin-name($arg1, $arg2, ...) {
// css code
}
@mixin mixini-name($arg1: 기본값설정1, $arg2: 기본값설정2, ...){
// css code
}
2. Mixin 사용
@include mixin-name;
@include mixin-name($arg1, $arg2, ...);
3. Mixin 예제
@mixin color {
color: red;
}
p {
@include color;
}
p {
color: red;
}
@mixin color($color){
color: $color
}
p {
@include color(#ffaaaa);
}
p {
color: #ffaaaa;
}
/* 3번예제 - arguments(인수)가 없을 경우 기본값을 설정 */
/* SCSS */
@mixin title($color: #ffaaaa, $size: 10px) {
color: $color;
font-size: $size;
}
h1 {
@include title(red);
}
/* css */
h1 {
color: red; /* 인수에 red를 넣어서 red로 출력 */
font-size: 10px; /* 인수에 기본값이 설정 되어있어서 10px로 출력 */
}