1. sass basic - mixin
여러가지 css 속성들을 하나의 그룹으로 묶어서 여러곳에서 재사용하게 할 수 있는 sass의 mixin이라는 기능에대해 알아보도록 하겠다.
scss
// mixin
@mixin fontSizeBgColor($fontSize: 20px, $bgColor: #fff) {
font-size: $fontSize;
background-color: $bgColor;
}
@mixin linkStyle($textColor: #222, $textDeco: none) {
color: $textColor;
text-decoration: $textDeco;
}
#box1 {
@include fontSizeBgColor(40px, #ffcccc);
& > a {
@include linkStyle(#ee6633);
}
}
#box2 {
@include fontSizeBgColor();
& > a {
@include linkStyle(#a22, none);
&:hover {
@include linkStyle(#000, underline);
}
}
}
css
#box1 {
font-size: 40px;
background-color: #ffcccc;
}
#box1 > a {
color: #ee6633;
text-decoration: none;
}
#box2 {
font-size: 20px;
background-color: #fff;
}
#box2 > a {
color: #a22;
text-decoration: none;
}
#box2 > a:hover {
color: #000;
text-decoration: underline;
}