Question

我刚开始使用SCSS。我注意到生成的CSS比我手工编写时的优化程度要低一些。例如，我使用mixins进行样式复制，如下所示：

@mixin button {
    border-radius: 4px 20px 20px 4px;
    -moz-border-radius: 4px 20px 20px 4px;
}
.enquire {
    .live-chat {
        @include button;
        background: #21a649;
    }
    .enquire-now {
        @include button;
        background: #33b1ff;
    }
}

然后我在按钮上需要的只是单个类“inquire-now”，所有样式都包含在CSS中的那个类中。

但是，如果我手写这个，我会使用2个类，如下：

.button {
    border-radius: 4px 20px 20px 4px;
    -moz-border-radius: 4px 20px 20px 4px;
}
.enquire .live-chat {
    background: #21a649;
}
.enquire .enquire-now {
    background: #33b1ff;
}

然后在元素上，使用“button in-now”

因此，通过使用mixin，我最大限度地减少了我的HTML中使用的类并使其编写愉快，但我的实际CSS文件更长！这似乎有点适得其反......我错过了什么？

mixins有什么意义，如果以老式的方式实际生成一个较小的CSS文件？

Answer 1

使用@extend指令可以更轻松地维护代码，并防止样式重复：

%button {
    border-radius: 4px 20px 20px 4px;
    -moz-border-radius: 4px 20px 20px 4px;
}
.enquire {
    .live-chat {
        @extend %button;
        background: #21a649;
    }
    .enquire-now {
        @extend %button;
        background: #33b1ff;
    }
}

编译到这个：

.enquire .live-chat, .enquire .enquire-now {
border-radius: 4px 20px 20px 4px;
-moz-border-radius: 4px 20px 20px 4px;
}
.enquire .live-chat {
background: #21a649;
}
.enquire .enquire-now {
background: #33b1ff;
}

Answer 2

这是一个折衷。你可以获得更好的作者，更易于维护的CSS，因为它更加冗长。正如我最近发现IE中的这个令人讨厌的东西，你不能在一个CSS文件中拥有超过一定数量的选择器，然后它也限制了CSS文件的数量。因此，对于大型站点保持，我们的选择器倒计时可能就像不比文件的大小更重要。特别是因为您可以通过minifiying然后提供压缩（gzip）版本来缓解文件大小问题。

Answer 3

确实使用@extend代替：Sass Extend Reference

SCSS结构与多个CSS类

3 个答案: