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

据我所知，模块非常有用，因为它们可以导入所需的任何位置并可以使用。但是变量只能在具有全局范围和内联范围的页面内使用。

我认为

module和css变量无与伦比。

请检查此链接以获取更多参考。

Click here for Css module description

Css varible description