SASS 中的 @extend、@mixin 与重复的 css 片段

最近在新项目中使用了 SASS，不得不说，用了它之后，写 css 变得有趣多了，但今天无意中发现了一个小问题：生成的 css 文件中有很多重复的片段。

举例来说：

@mixin error {
    color:red;
}

.small-error {
    @include error;
    font-size:14px;
}

.big-error {
    @include error;
    font-size:24px;
}

因为这两个类用到了同一个片段，所以我想像中应该生成的 css 文件是这样的：

.small-error,.big-error{ /* 共用相同的片段 */
    color:red;
}

.small-error {
    font-size:14px;
}

.big-error {
    font-size:24px;
}

但结果它生成的是这样：

.small-error {
    color:red; /* 单独插入，没有共用 */
    font-size:14px;
}

.big-error {
    color:red;
    font-size:24px;
}

这时我才发现，@mixin 并不会像 @extend 那样共用 css 片段。

那为什么我没有用@extend呢？我一开始确实用到了，是这样写的：

.error {
    color:red;
}

.small-error {
    @extend .error;
    font-size:14px;
}

.big-error {
    @extend .error;
    font-size:24px;
}

但这样写有一个问题：css 文件里面会生成一个 .error ——一个只是被用来 extend 的、并不会在 html 中用到的类。

在查阅相关文档后，问题得到了解决：使用 @extend-Only Selectors。

由此可见，@mixin 主要作用是通过参数生成不同的 css 内容：

@mixin color($color){
    color:$color;
}

如果是多个类有公用的 css 片段，还是应该使用 @extend-Only Selectors。

最后顺便提一句，我在安装 gulp-sass 的时候总是失败，按照 node-sass 推荐的步骤安装也失败，但是重启电脑后再安装就成功了，不知道这是什么鬼。- -