如何从 Sass 样式表中只导入变量和 mixin？

Posted 2023-03-06

【中文标题】如何从 Sass 样式表中只导入变量和 mixin？

【英文标题】：How can one import only variables and mixins from Sass stylesheets?

【发布时间】：2013-08-26 19:54:20

【问题描述】：

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

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

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

【问题讨论】：

如果您将其用作 Compass 扩展，则不需要手动创建变量文件。命令compass install foundation 应该已经为你生成了一个_settings.scss 文件。

@cimmanon，我没有使用指南针；我让 Rails 的资产管道负责编译，并让捆绑器负责依赖管理。

【参考方案1】：

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

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

【讨论】：

谢谢，我不知道 Foundation 提供的抑制变量。这些应该会有所帮助。

有没有办法专注于下载bullet nav scss/css而不是整个样式块？

@NeilLittle 请参阅答案的“进口是全有或全无”部分。除非作者以允许您这样做的方式编写文件，否则您不能选择文件的某些部分。

补充：刚刚找到这行，例如$include-html-button-classes: $include-html-classes !default; 看起来将$include-html-classes 设置为false 会使Foundation 发出no 样式！