混合(Mixin)
理解:
包含多个样式的‘变量’,定义的混合若不使用,就不会解析到css样式中;使用过后,解析时,相当于将定义的样式复制到使用的位置。
优点:
可以传参。
缺点:
因为解析时是复制代码,解析后会有大量代码。
基本使用:
定义混合:
@mixin mixin-name() {
/* css 声明 */
}
使用混合:
body{
@include mixin-name();
...
}
解析格式:
body{
/* css 声明 */
}
带参数的混合:
// 定义
@mixin row($dir, $main){
display: flex;
flex-direction: $dir;
justify-content: $main
}
// 调用
.body{
@include row(row, space-between);
}
// 解析
.body{
display: flex;
flex-direction: row;
justify-content: space-between;
}
但是定义了参数,调用时就必须传参,不然会报错;
带参数默认值的混合:
// 定义
@mixin row($dir: column, $main: start){
display: flex;
flex-direction: $dir;
justify-content: $main
}
// 调用
.div1{
@include row();
}
.div2{
@include row(row);
}
.div3{
@include row(row, end);
}
.div4{
@include row(end);
}
.div5{
@include row(end, row);
}
// 解析
.div1{
display: flex;
flex-direction: column;
justify-content: start;
}
.div2{
display: flex;
flex-direction: row;
justify-content: start;
}
.div3{
display: flex;
flex-direction: row;
justify-content: end;
}
.div4{
display: flex;
flex-direction: end; // 错误语法
justify-content: start;
}
.div5{
display: flex;
flex-direction: end; // 错误语法
justify-content: row; // 错误语法
}
传参顺序要与定义顺序一致,不可漏传,但可用下方方式调用
多个参数时:
// 调用
.body{
@include row($main:start, $dir:row);
}
// 解析
.body{
display: flex;
flex-direction: row;
justify-content: start;
}
参数元素较多时(...):
// 定义
@mixin shadow($shadow...){
box-shadow: $shadow;
}
// 使用
.box{
@include shadow(0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04))
}
// 解析
.box{
box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
}