如何从Sass样式表中仅导入变量和mixin？

Question

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

为了缓解这种情况,我创建了一个globalsscss文件,其中包含Foundation使用的可重写变量(它是从中复制粘贴的foundation_and_overrides.scss,然后是foundation_and_overrides导入全局变量).仅导入globals.scss文件只能在不使用Foundation mixins 的文件中删除重复.

它位于使用Foundation mixins的文件中:我可以只导入SCSS文件中的mixins,而无需导入具体的Foundation样式吗？

Answer 1

进口是一个全有或全无的事情.文件中的所有内容都是您得到的.但是,如果查看Foundation的源代码,可以修改一些可以抑制发光样式的变量(例如,在按钮中,设置$include-html-button-classes为false将禁用样式).此设计模式是特定于Foundation的,您不能指望以这种方式编写其他库.

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

Answer 2

我遇到了类似的问题，我想简单地使用另一个文件中的变量，而不导入所有 CSS。

新 Sass 版本的关键字@use可用于确保 CSS 不会多次发出。

缺点是：

• 只有“Dart Sass”支持编译它（至少在撰写本文时）。
• @use规则必须写在任何其他规则之前。
• 最后但并非最不重要的一点是，我们不能简单地替换@import为@use, 并且需要在范围前面加上前缀，例如：

  @use '../my-module';
  
  body {
      background-color: my-module.$my-variable;
  }
  

警告： @extends关键字不能有前缀my-module.，因为扩展根本没有范围（至少在撰写本文时）。