10

在 Sass 中，我可以在一个单独的文件中定义我的变量_variables.scss，然后让这些变量在我使用的任何地方都可用@import variables;。（实际上，变量在第一次导入后全局可用。）

使用 PostCSS，我可以使用postcss-simple-vars或postcss-css-variables定义单个文件的本地变量。我想在一个文件中定义所有/大多数变量，然后@import在我需要使用它们的地方定义该文件。

我知道 PostCSS 插件可以为插件配置预定义的变量，但是我不能，例如，计算给定背景的对比色。

编辑：我可能不清楚我的问题是什么。

有没有办法在 CSS 文件中定义 PostCSS 变量，使变量不是全局的，但可以“导入”到另一个 CSS 文件中？

如上所述，我可以使用 Sass，但是所有变量实际上都是全局的（不理想）。否则，在 PostCSS 中，我可以在每个样式表中定义我需要的变量（有什么意义？），或者我可以在静态 JavaScript 结构中定义它们（静态，因为它们不能引用其他变量）。

4

3 回答 3

5

您可以使用postcss-import像在 Saas 中一样导入文件。

然后，您使用 vars 创建一个文件并将它们导入您喜欢的位置。

@import "css/_variables.css";
于 2016-04-06T07:07:19.783 回答
1

我知道的几个选项：

  • postcss -simple-vars和postcss-custom-properties都允许您从 JavaScript传入变量，而不必在 CSS 文件中定义它们——这意味着它们可以在任何地方访问。

  • 在使用 PostCSS 编译之前，连接您的文件，将变量放在顶部。或使用 postcss-imports 为您处理此问题。

于 2015-11-05T02:17:46.763 回答
0

我真的不明白你想要完成什么，或者你所说的全局变量是什么意思。变量的意义在于跨 CSS 文件访问它们。它们无论如何都不会被编译到您的 CSS 中，所以为什么不将所有变量存储在名为 global.css 的文件中，并通过导入全局文件在任何需要的地方引用变量。

SCSS 只是一个预处理器，因此您的变量实际上都没有写入 CSS 文件，因此您不必担心变量的范围。

于 2016-11-12T05:17:10.183 回答