Bourbon+Neat SCSS库生成臃肿的CSS输出。

Question

我正在使用Bourbon来构建我的css文件，但我看到的是正在填充的冗余css。

scss文件具有以下内容：

.col-9 {
  @include span-columns(9);
}
.col-3 {
    @include span-columns(3);
    @include omega();
}

CSS输出如下：

.col-9 {
    float: left;
    display: block;
    margin-right: 1.69492%;
    width: 74.57627%;
}

.col-9:last-child {
    margin-right: 0;
}

.col-3 {
    float: left;
    display: block;
    margin-right: 1.69492%;
    width: 23.72881%;
    margin-right: 0;
}

.col-3:last-child {
    margin-right: 0;
}

下面的css输出膨胀为下面的css支柱

float: left;
display: block;

最后一次和最后一次的第三组也可以分组。

我做错了什么吗？如何构造scss以获得所需的输出。

.col-9,
.col-3 {
    float: left;
    display: block;
}

.col-9 {
    margin-right: 1.69492%;
    width: 74.57627%;
}
.col-3 {
    margin-right: 1.69492%;
    width: 23.72881%;
    margin-right: 0;
}

.col-9:last-child, .col-3:last-child {
    margin-right: 0;
}

Answer 1

这正是您应该期望从使用整洁的混联库中得到的输出。如果您查看这里，您将看到@span-columns()的每次使用都会提供一个display: block;和float属性。正如@Rob所提到的，这是正常的，正如您所指出的，这是使用这个库的潜在障碍。

您是正确的，因为更优化的CSS输出应该是将相似的属性组合在一起。不过，在您的情况下，这应该通过一个后处理任务来处理，而不是在整齐的mixin库本身中处理。我相信，如果您使用类似于清洁css的东西，您应该能够将类似的属性合并在一起，并获得您想要的输出。您还可以使用Gulp模块minify-css。