Использование переменных CSS в LESS

Question

Это может показаться базовым, но я не могу понять, как использовать переменные CSS в LESS?

variables.css:

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

styles.less:

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

Я получаю сообщение об ошибке "@ header-color is undefined".

Answer 1

LESS позволяет использовать обычный код CSS, поэтому можно использовать одну опцию: просто использовать переменную в качестве CSS:

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

Очевидно, вы можете сохранить переменную css в переменной LESS:

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