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");
}

什么是LESS相当于在CSS中声明var？

1 个答案: