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库所期望的输出。如果看上去here，您会发现@span-columns()的每次使用都会产生display: block;和float属性。正如@Rob所提到的，这是正常的，正如你所指出的那样，使用这个库可能会受到阻碍。

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

Bourbon + Neat SCSS库产生膨胀的CSS输出

1 个答案: