scss-2: mixins
mixins
- scss functionality를 재사용 할 수 있도록 해줌
- style.css 에 compile 되진 않음
- 어떤 종류의 argument를 mixin에다가 보낼때 css의 결과값을 바꿈
- scss와 같은 폴더에 _mixins.scss 라고 파일을 생성함
- @mixin name { }
- style.scss에 css선택자 괄호 안에 @include name(); 기입
<body>
<h1>Hello</h1>
</body
//mixins.scss//
@mixin name {
color: blue;
font-size: 30px;
margin-bottom: 12px;
}
//style.scss//
@import "_variables";
@import "_mixins";
h1 {
@include name();
}
<body>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
</body>
//_mixins.scss//
@mixin link {
text-decoration: none;
display: block;
}
//style.scss//
@import "_variables";
@import "_mixins";
a {
@include link();
}
- 여러 개 할 때 더 효율적임
$color라는 variable을 link( )에 허용 시켜주기
//style.scss//
@import "_variables";
@import "_mixins";
a {
margin-bottom: 10px;
&:nth-child(odd) {
@include link(blue);
}
&:nth-child(even) {
@include link(red);
}
}
//_mixins.scss//
@mixin link($color) {
text-decoration: none;
display: block;
color: $color;
}
js처럼 if 사용하기 (@if)
//_mixins.scss//
@mixin link($word) {
text-decoration: none;
display: block;
@if $word == "odd" {
color: green;
} @else {
color: yellow;
}
}
//style.scss//
@import "_variables";
@import "_mixins";
body {
background-color: black;
}
a {
margin-bottom: 10px;
&:nth-child(odd) {
@include link("odd");
}
&:nth-child(even) {
@include link("even");
}
}
↓ style.css 에 compile 된 모습… wow!! ↓
댓글남기기