CSS Variables vs CSS Modules @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