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

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

模块和css变量是我无法比拟的。

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

单击此处获取CSS模块说明

CSS变量描述