Using CSS variables in LESS

Question

This might seem basic, but I can't figure out how to use CSS variables in LESS?

variables.css:

.root {
    --header-color: white;
    --content-color: yellow;
}

styles.less:

@import "../variables.css";
.header {
   color: @header-color;
}

I get error "@header-color is undefined".

The.Bear · Accepted Answer · 2024-06-18 15:49:41Z

9

LESS allows you to use normal CSS code, so use one option could be just use the variable as CSS:

@import "../variables.css";
.header {
   color: var(--header-color);
}

Also, you can save the css var to a LESS var:

@import "../variables.css";
@header-color: var(--header-color);

.header {
   color: @header-color;
}

WARNING: Is not possible to use css variables as parameters of less functions like color: darken(var(--header-color), 50%). Even if you saved previously in a less variable color: darken(@header-color, 50%). This is because Less needs to know the value of the variable at compile time, while CSS variables are resolved at runtime in the browser.

edited Jun 18, 2024 at 15:49

answered Jan 25, 2019 at 15:38

The.Bear

5,8952 gold badges31 silver badges34 bronze badges

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

2 Comments

Pradeepa Over a year ago

When we use this, its returning fade: a.toHSL is not a function for darken function in less

The.Bear Over a year ago

@Pradeepa I will add a detailed warning to my answer later, mainly to avoid confusions, but to give you a short answer: is not possible to use css variables as parameters of less functions like color: darken(var(--header-color), 50%).

Collectives™ on Stack Overflow

Using CSS variables in LESS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related