CODEWITHSUNDEEP
csstwitter-bootstrap-3less
Olly Middleton
Olly Middleton

Reputation: 67

Can I put Less variables inside custom CSS variables?

I am tasked with changing LESS variables into CSS custom properties using the CSS var() function.

e.g.

:root {
    --body-bg:               #e0e0e0;
    --navbar-bg:             var(--body-bg);
    --content-bg-color:      #f8f8f8;

I wanted to know if I could store LESS variables inside these custom variables? I am using Bootstrap LESS variables as a base

e.g. 

    --list-update-color:      mix(@brand-primary, #00f);
    --message-enquiry-color:  mix(@brand-primary, #00f);
    --ticked-color:          desaturate(lighten(@brand-info, 10%), 10%);
    --selecting-color:       desaturate(lighten(@brand-info, 5%), 10%);

Upvotes: 1

Views: 1840

Answers (1)

Facundo Corradini
Facundo Corradini

Reputation: 3913

Short answer is yes, you can.

Now for the correct answer: you shouldn't (unless you're gonna use their additional power and set the fallbacks)

LESS variables are supported by all browsers, as they compile to regular CSS. CSS vars are not supported by some browsers, most notably IE (and never will).

So the change doesn't really make any sense if you are gonna use it as you would use regular variables.

But CSS variables are much more than that. They can be changed at runtime with javascript, they provide DOM tree scopes so makes for extremely awesome modifiers, and can provide a much better user experience when used as progressive enhancement.

Just remember that you totally have to set a fallback for them so IE don't get completely empty declarations.

So all in all, you probably want to keep your LESS variables, use them as the default value in your CSS variables, and set a proper fallback for them.

Upvotes: 1

Related Questions