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

问题描述

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

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 mixins的文件中即可.

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 mixins的文件中:是否可以仅从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的来源，则可以修改一些变量来抑制发射样式(例如，在

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 .如您所见，它将导入其他文件.如果您不需要所有内容，则不必导入此文件:只需导入所需的特定文件(例如，仅对side-nav文件使用@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屋！