Sass部分导入

Question

我遇到了sass编译问题。

当我有一个部分_partial.scss的项目并将其导入多个部分文件（因为它包含颜色变量）时，它将多次在编译的css中结束！

这很难看，因为同样的规则会多次“否决”自身，这会使调试信息（chrome dev tools / firebug）变得难以理解。

我认为所有这些都有解决方案。我在任何地方都找不到任何关于这个问题的东西。

Answer 1

解决方案要么多次不包含同一个文件，要么没有任何代码直接在您计划的文件中输出CSS，包括多次。如果你的变量本身就是一个文件，那么它们可以安全地包含在你想要的任何地方，而不需要选择器重复。

Answer 2

也许这个@mixin会帮助你：https://github.com/wilsonpage/sass-import-once。

查看示例并注意重置仅在最终CSS中包含一次。

Answer 3

似乎正因为如此，sass（因此也就是scss）现在有了@use而不是@import。来自@use documentation（重点是我的）：

最简单的@use规则写为@use“”，该规则将模块加载到给定的URL。这种方式加载的任何样式，无论加载多少次，都会在编译后的CSS输出中仅包含一次。

Sass还不鼓励进一步使用@import：

Sass团队不鼓励继续使用@import规则。 Sass将在未来几年逐步淘汰它，并最终将其从语言中完全删除。最好使用@use规则。

任何有此问题could try running the module migrator tool的项目，并检查问题是否已解决。