25

我正在使用 Zurb Foundation 4 (S)CSS 框架，并且遇到了大量重复样式的问题。这是因为在我进入的每个文件@import 'foundation'中，Foundation 中的所有样式也都被导入（用于body、.row和.button朋友的规则）。这导致了较长的 SCSS 编译时间和在 Chrome 中难以导航的 Web 开发人员控制台，因为 Zurb 的所有样式都被声明了四到五次。

为了缓解这种情况，我创建了一个globalsscss 文件，其中包含 Foundation 使用的可覆盖变量（它是从 复制粘贴foundation_and_overrides.scss，然后foundation_and_overrides导入全局变量）。仅导入globals.scss文件可以消除不使用 Foundation mixin 的文件中的重复。

它在使用 Foundation mixins 的文件中：我可以只从 SCSS 文件中导入 mixins，而不导入具体的 Foundation 样式吗？

4

1 回答 1

15

进口是全有或全无的事情。文件中的所有内容都是您得到的。但是，如果您查看 Foundation 的源代码，您可以修改一些变量来抑制发射样式（例如，在按钮中，设置$include-html-button-classes为 false 将禁用样式）。此设计模式是 Foundation 特定的，您不能期望其他库以这种方式编写。

当您通过 导入基础时@import "foundation"，您正在导入此文件：https ://github.com/zurb/foundation/blob/master/scss/foundation.scss 。如您所见，它导入了其他文件。如果您不需要所有内容，则不必导入此文件：只需导入您想要的特定文件（例如@import 'foundation/components/side-nav'，仅用于侧导航文件）。

于 2013-08-23T17:26:46.163 回答