CSS变量与CSS模块@value

Question

I was wondering what exactly is the difference between the css function var(--red) and @value red from css modules.

CSS Modules Example:

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

.background {
    background-color: red;
}

CSS Var() Example:

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

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

Is there an advantage using one of them?
Thanks in advance for helping me out!

Answer 1

CSS modules @value is

1. Similar to preprocessor(sass/less) variable. Its alive in compile time.
2. As it compiles to plain css. It works in every browser.

CSS Var() is

1. A live variable in css file. Any change to its value is reflected live in the elements its being used.
2. As its a new css feature, Works in modern browsers only

Answer 2

As of i know modules are very useful as they can import any where they want and can be used.but variables can only be used inside page with global and inline scope.

module and css variable are incomparable as i think so.

please check this link for more reference.

Click here for Css module description

Css varible description