如何从 Sass 样式表中只导入变量和 mixin? [英] 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" 导入 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 样式表中只导入变量和 mixin?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！