我可以避免使用 Zurb Foundation 4 重复 css 吗？答案

【问题标题】：Can I avoid duplicated css with Zurb Foundation 4?我可以避免使用 Zurb Foundation 4 重复 css 吗？
【发布时间】：2013-09-20 00:01:01
【问题描述】：

我正在使用 ZF4，我最近注意到我的 css 文件有多大。特别是在一个页面上，我有 10 行 sass，它使用了网格混合，所以我“优化”了我的导入，并得到了这个

@import "settings";
@import "foundation/components/global"; // *always required
@import "foundation/components/grid";

.tag-list-filter {
    @include grid-row('nest-collapse');

    .sub-nav {
        @include grid-column(6);
        margin: 0;
    }
    .date-in-filter {
        @include grid-column(4,true);
        label {
            display: inline;
        }
        input[type="text"] {
            display: inline;
            width: 50%;
        }
    }
}

这两个导入给了我 700 行 CSS 的开销！！！。而且我很高兴在我的 app.css 中添加这 700 行，因为我有很多使用网格系统的页面，但是为什么我的所有页面都应该有那么多重复的 css？

有什么办法可以避免吗？

【问题讨论】：

究竟复制了什么？
import "foundation/components/global" 生成的css；（大约 125 行）并导入“基础/组件/网格”；（大约 600 行）。问题是我需要在我的大部分页面中包含这些，因为 sass 需要了解变量和 mixins，这很好，但是在这个重复的 css 中还有一些东西，比如 body 标签的默认规则，现在，我有 normalize.css ，所以我猜这是不需要重复的。
How can one import only variables and mixins from Scss stylehsheets? 的可能重复项

标签： sass zurb-foundation compass-sass

【解决方案1】：

@Cimmanon 的建议是正确的，添加它解决了我的问题：

@import "settings";
$include-html-grid-classes: false;
$include-html-classes: false;
$include-print-styles: false;

@import "foundation/components/global"; // *always required
@import "foundation/components/grid";

每个组件可能都有自己的变量来控制是否打印样式。

顺便说一句，Zurbs 文档可以使用“性能提示”部分并将此提示包含在其中。并且不要在每个页面中包含整个基础。

【讨论】：