css - Bourbon+Neat 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 库应该得到的输出。如果你看here您会看到每次使用 @span-columns() 都会提供一个 display: block; 和 float 属性。正如@Rob 所提到的，这是正常的，正如您所指出的，这是使用该库的潜在障碍。

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