如何从 Sass 样式表中只导入变量和混合? [英] How can one import only variables and mixins from Sass stylesheets?

问题描述

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

I'm using the Zurb Foundation 4 (S)CSS framework, and I'm running into an issue of massively duplicated styles. This is because in every file that I @import 'foundation' in, all styles from Foundation are also imported (rules for body, .row, .button and friends). This leads to long SCSS compile times and a hard to navigate web developer console in Chrome, as all of Zurb's styles are declared four or five times.

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

To mitigate this, I've created a globals scss file, which contains the overrideable variables that Foundation uses (it's copy-pasted from foundation_and_overrides.scss, then foundation_and_overrides import globals). Importing just the globals.scss file gets rid of duplication only in files that don't make use of Foundation mixins.

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

It's in the files which make use of Foundation mixins: Can I import only the mixins from an SCSS file, without importing the concrete Foundation styles?

推荐答案

导入是一个全有或全无的事情.文件中的所有内容都是您得到的.但是，如果您查看 Foundation 的来源，您可以修改一些变量来抑制发射样式(例如在 buttons，将 $include-html-button-classes 设置为 false 将禁用样式).这种设计模式是特定于 Foundation 的，您不能指望以这种方式创作其他库.

Imports are an all or nothing thing. Everything that's in the file is what you get. If you look through the source of Foundation, though, there are variables you can modify that will suppress emitting styles (eg. in buttons, setting $include-html-button-classes to false will disable the styles). This design pattern is Foundation specific, you cannot expect other libraries to be authored this way.

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

When you import foundation via @import "foundation", you're importing this file: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. As you can see, it imports other files. You don't have to import this file if you don't need everything: just import the specific file you want (eg. @import 'foundation/components/side-nav' for only the side-nav file).

这篇关于如何从 Sass 样式表中只导入变量和混合?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！