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创建文件并将其导入到您喜欢的位置.

@import "css/_variables.css";

Answer 2

我知道的几个选项：

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

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