css - 在 CSS 中声明 var 的 LESS 等价物是什么？

Question

我有一个场景可以根据某些条件在运行时更改门户上的品牌颜色和其他一些样式变量。我能做到使用 CSS(查看下面的示例片段)。但是由于我们所有的 CSS 都是在编译时通过转换 LESS 文件生成的，不确定如何在 LESS 中编写类似的逻辑以便它生成如下所示的 CSS？

:root {
    --brand-color: yellow;
}

h1 {
    color: var(--brand-color);
}

<h1 id="demo">Hello</h1>
<button onclick="myFunction()">Click me</button>

function myFunction() {
    document.documentElement.style.setProperty('--brand-color', 'red');
}

Answer 1

@yellow-color: yellow;
@red-color: red;

h1{
  color: @yellow-color;
  &.red-color{
    color: @red-color;
  }
}

改为添加类

function myFunction(){
  $("myelement").addClass("red-color");
}