#Mixins
1. scss functionality를 재사용할 수 있게 해준다.
2. Mixins은 compile 될 수 없다.
variables과 마찬가지로 앞에 밑줄(_)을 사용하여 파일을 만들어야한다.
맨처음에 @mixin ${name} <=(mixin의 이름) 을 작성한다
ex)
@import biblee {
color: blue;
font-size: 32px;
margin: 20px;
}위와 같이 선언해주고 해당 코드를 적용하고 싶으면 variable과 동일하게 style.scss에서
@import "_${name}"을 해주어야한다
그리고 내가 적용하고싶은 요소에 아래와 같이 작성하면 된다.
.box1 {
@include biblee(); // Mixins는 function과 비슷하다
}해당 스타일은 하나의 태그에 전부 적용이 가능하겠지만 따로 적용하는 방법도 있다.
Ch2
1. _Mixins.scss 파일
@mixin link($color){
text-decoration: none;
font-size: 40px;
display: block;
color: $color; <=== 우리가 원하는 값
}2. styles.scss
a {
&:nth-child(odd) {
@include link(red); // 홀수의 글씨는 RED
}
&:nth-child(even) {
@include link(blue); // 짝수의 글씨는 BLUE
}
}odd: 홀수 , even : 짝수
위와 같이 홀수 요소에는 color를 blue로 짝수 요소에는 color를 red로 적용할 수 있다.
또 다른 방법으로는 함수 처럼 사용 할 수 있다.
Ch3
if , else를 사용 할 수 있으며 , 비교연산자 (==)를 사용 할 수 있다.
1. _mixins.scss
@mixin link($word) {
text-decoration: none;
font-size: 40px;
display: block;
@if $word== "odd" { // 만약 홀수 이면 글씨색은 yellow , 홀수가 아니면 blue
color: yellow;
} @else {
color: blue;
}
}2.style.scss
li {
&:nth-child(odd) {
@include link("odd");
}
&:nth-child(even) {
@include link("even");
}
}li : 홀수 번째 자식들은 color:blue로 변하게 되고 짝수 번째 자식들은 color:yellow로 변하게 된다.
