波旁+整洁的SCSS库产生臃肿的CSS输出

Question

我正在使用Bourbon Neat来构建我的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 prop

float: left;
display: block;

和col-3:last-child和col-9:last-child也可以分组

我做错了什么吗?如何构建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

这正是使用Neat mixin库所期望的输出。如果你看这里，你会看到@span-columns()的每次使用都会产生display: block;和float的性质。正如@Rob所提到的，这是正常的，正如你所指出的，这是使用这个库的潜在障碍。

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