如何从Scss样式表导入只有变量和混合？ [英] How can one import only variables and mixins from Scss stylehsheets?

问题描述

我使用的是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 import globals）复制粘贴的。只导入 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?

推荐答案

导入是一个全或无的东西。文件中的一切都是你得到的。如果你通过基金会的来源，但有一些变量，你可以修改，将抑制发布风格（例如在按钮，将 $ include-html-button-classes 设置为false将禁用样式）。

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.

当您通过 @importfoundationimport导入基础时， / code>，您正在导入此文件： https://github.com/ zurb / foundation / blob / master / scss / foundation.scss 。正如你可以看到，它导入其他文件。你不必导入这个文件，如果你不需要一切：只是导入你想要的特定文件（例如 @import'foundation / components / side-nav'仅用于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).

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