PostCSS

Question

在Sass中，我可以在单独的文件_variables.scss中定义我的变量，然后在@import variables;的任何位置使这些变量可用。 （实际上，变量在首次导入后全局可用。）使用PostCSS，我可以使用postcss-simple-vars或postcss-css-variables来定义单个文件的局部变量。我想在一个文件中定义所有/大多数变量，然后@import该文件在我需要使用它的地方。

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

编辑：我可能不清楚我的问题是什么。 有没有办法在CSS文件中定义PostCSS变量，使变量不是全局的，但可以“导入”到另一个CSS文件中？如上所述，我可以使用Sass，但是所有变量实际上是全局的（不理想）。否则在PostCSS中我可以在我需要的每个样式表中定义变量（重点是什么？），或我可以在静态JavaScript结构中定义它们（静态，因为它们不能引用其他变量）

Answer 1

您可以使用postcss-import导入Saas等文件。

然后，您使用vars创建文件并将其导入到您喜欢的位置。

print("a\nb")

Answer 2

我知道的几个选项：

• postcss-simple-vars和postcss-custom-properties都允许您从JavaScript 传递变量，而不必在CSS文件中定义它们 - 这意味着它们可以被访问无处不在：https://github.com/postcss/postcss-simple-vars#variables; https://github.com/postcss/postcss-custom-properties#variables
• 在使用PostCSS进行编译之前，将文件连接起来，将变量放在顶部。或者使用postcss-imports为您处理此问题。

Answer 3

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

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