Search code examples
cssmodulecss-variables

CSS Variables vs CSS Modules @value

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!

Solution

  • 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