在 Sass
中,可以通过 @mixin
复用样式片段 和 @extend
继承其他选择器的样式片段来提高代码的重复使用率,那这两者之间有什么区别呢?
使用 @mixin
复用样式片段
向 Mixin
传递参数
Mixin
可以接收和使用参数
/*
可以接收两个参数:
- background
- color: 默认值为 #fff
*/
@mixin button($background, $color: #fff) {
font-size: 14px;
padding: 10px 20px;
color: $color;
background: $background;
}
// 创建一个绿色的按钮
.button-green {
@include button(green);
}
// 创建一个红色的按钮
.button-red {
@include button(red, #000);
}
复制代码
编译后的代码
.button-green {
font-size: 14px;
padding: 10px 20px;
/* color: 没有传递参数时使用默认值 */
color: #fff;
background: green;
}
.button-red {
font-size: 14px;
padding: 10px 20px;
/* color: 使用传入的参数值 */
color: #000;
background: red;
}
复制代码
向 Mixin
传递样式片段
除了传递参数,也可以直接向 Mixin
传递样式片段。
- 在
Mixin
中添加@content
- 通过
@include
传递样式片段
// 1. 在 Mixin 中添加 @content
@mixin button($color: #fff) {
font-size: 14px;
padding: 10px 20px;
color: $color;
@content;
}
// 2. 通过 @include 传递样式片段
.button-green {
@include button {
background: green;
}
}
复制代码
编译后的代码:
.button-green {
font-size: 14px;
padding: 10px 20px;
color: #fff;
background: green;
}
复制代码
@include
指令传递的CSS片段就会代替 @content
语句出现在 mixin
中相应的位置。
使用 @extend
继承其他选择器的样式简化代码
.button {
font-size: 14px;
padding: 10px 20px;
color: #fff;
}
.button-green {
@extend .button;
background: green;
}
.button-red {
@extend .button;
background: red;
}
复制代码
这段Sass被编译为 DRY CSS
风格的代码,而@mixin
编译出的则是相同的样式片段在不同的选择器中重复多次
.button,
.button-green,
.button-red {
font-size: 14px;
padding: 10px 20px;
color: #fff;
}
.button-green {
background: green;
}
.button-red {
background: red;
}
复制代码
@mixin
和 @extend
的区别
@extend
命令不够灵活,不能传递参数。而@mixin
不仅能传递参数,还能传递代码块。- 编译的结果不一样。
@extend
可以生成DRY
格式的代码。