如何才能从Scss样式表导入variables和混合?

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

为了减轻这一点,我创build了一个globals scss文件,其中包含了Foundation使用的可覆盖variables(从foundation_and_overrides.scss复制粘贴,然后是foundation_and_overrides导入全局variables)。 只导入globals.scss文件只会在不使用Foundation mixins的文件中删除重复项。

它在使用Foundation mixins的文件中:我能否只导入SCSS文件中的mixins,而不导入具体的Foundation样式?

import是一件完全没有意义的事情。 文件中的所有内容都是你所得到的。 但是,如果你查看Foundation的源代码,可以修改一些variables来抑制发射风格(例如,在button中 ,将$include-html-button-classes为false将禁用样式)。 这种devise模式是基础特定的,不能期望用这种方式来创作其他库。

当你通过@import "foundation"导入基础时,你正在导入这个文件: https : //github.com/zurb/foundation/blob/master/scss/foundation.scss 。 正如你所看到的,它会导入其他文件。 你不需要导入这个文件,如果你不需要的话,只需导入你想要的特定文件(例如@import 'foundation/components/side-nav'只用于side-nav文件)。