CSS 变量与 CSS 模块 @value

Question

我想知道 css 函数 var(--red) 和来自 css 模块的 @value red 到底有什么区别。

CSS 模块示例：

@value red from "./color.m.css";

.background {
    background-color: red;
}

CSS Var() 示例：

@import "./color.m.css";

.background {
    background-color: var(--red);
}

使用其中之一有优势吗？
预先感谢您帮助我！

Answer 1

CSS 个模块@value 是

1. 类似于预处理器（sass/less）变量。它在编译时还活着。
2. 因为它编译成纯文本 css。它适用于所有浏览器。

CSS Var() 是

1. css 文件中的实时变量。 对其值的任何更改都会实时反映在其使用的元素中。
2. 作为一项新的 css 功能，仅适用于现代浏览器

Answer 2

据我所知，模块非常有用，因为它们可以导入任何他们想要的地方，并且可以是 used.but 变量只能在具有全局和内联范围的页面内使用。

module 和 css variable 在我看来是不可比的

请查看此 link 以获得更多参考。

Click here for Css module description

Css varible description