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!

Moorthy G · Accepted Answer · 2019-03-18 14:22:06Z

4

CSS modules @value is

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

CSS Var() is

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

answered Mar 18, 2019 at 14:22

Moorthy G

1,4931 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bathri Nathan · Accepted Answer · 2019-03-18 14:25:34Z

0

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

answered Mar 18, 2019 at 14:25

Bathri Nathan

1,2772 gold badges15 silver badges19 bronze badges

Collectives™ on Stack Overflow

CSS Variables vs CSS Modules @value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related