Sass: @mixin 和 @extend 的区别

在 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 传递样式片段。

1. 在 Mixin 中添加 @content
2. 通过 @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 的区别

1. @extend 命令不够灵活，不能传递参数。而 @mixin 不仅能传递参数，还能传递代码块。
2. 编译的结果不一样。@extend 可以生成 DRY 格式的代码。