Bourbon+Neat SCSS 库产生臃肿的 CSS 输出答案

【问题标题】：Bourbon+Neat SCSS library produces bloated CSS outputBourbon+Neat SCSS 库产生臃肿的 CSS 输出
【发布时间】：2016-01-11 20:34:32
【问题描述】：

我正在与 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;
}

【问题讨论】：

这些自动代码生成器不正常吗？
可能重复：stackoverflow.com/questions/19451296/…
@cimmanon，我不认为这是同一个问题。我的问题与 2 个库（波旁威士忌和整洁）特别相关，如果有人有任何建议以更好的方式编写 scss，从而将具有共同属性的选择器分组。
所以看看你正在使用的 mixin 的来源。仅仅因为其他人编写了 mixin 并不意味着他们按照不同的规则进行游戏。
@Rob，我了解，但我不确定这是图书馆还是我编写 scss 的方式。我不相信作者在编写程序时会忽略关键细节。在调查源文件时，我希望获得第二意见。

标签： css sass bourbon neat

【解决方案1】：

这正是您使用 Neat mixin 库所期望的输出。如果您查看here，您会发现每次使用@span-columns() 都会给出display: block; 和float 属性。正如@Rob 提到的，这是正常的，正如您所指出的，这可能会阻碍使用这个库。

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

【讨论】：

我看到了源文件并且知道库的默认值。我确实使用带有 grunt 的 clean-css，我想知道是否有一些自定义更改可以就如何改进此功能提出一些建议。
您无法改变 Neat 框架的运行方式。您可以使用后处理工具来执行您建议的优化，或者您创建自己的 Sass mixin 来执行您想要的操作。类似@include col() { display: block; float: left; } @include columns(width) { width: percentage(width / $container-columns); }