CSS 变量与 CSS 模块 @value

Question

我想知道 css 模块中的 css 函数 var(--red) 和 @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 文件中的实时变量。其值的任何更改都会实时反射(reflect)在其使用的元素中。
2. 作为一个新的 CSS 特性，仅适用于现代浏览器