Question

所以我想说，我将页面上10个元素的背景设置为@base，然后用户登陆“Foo”页面，该页面的主体上有类。

如何通过css声明更新@base？我理解变量是函数（或css声明）的本地变量，但必须有一个方法来做到这一点！（会使替代页面的样式变得如此简单！）

@base: #00000;

body.foo{
 @base = #FFF;
}

Answer 1

LESS是一个预处理器......

...这一切都必须提前预编译到CSS中。这意味着所有可能的类组合需要提前制作成有效的CSS。如果您想要这样的东西，您需要在LESS中执行以下操作：

<强> LESS

@base: #000000;

.setColorOptions(@className: ~'', @base: @base) {
  @classDot: escape(`('@{className}' == '' ? '' : '.')`);
  @class: escape(@className);
  body@{classDot}@{class} {
     someElement {color: @base;}
     .someClass {color: @base;}
    // etc.
  }
}
.setColorOptions();
.setColorOptions(foo, #fff);
.setColorOptions(bar, #ccc);

CSS输出

body someElement {
  color: #000000;
}
body .someClass {
  color: #000000;
}
body.foo someElement {
  color: #ffffff;
}
body.foo .someClass {
  color: #ffffff;
}
body.bar someElement {
  color: #cccccc;
}
body.bar .someClass {
  color: #cccccc;
}

显然如果有很多元素和很多颜色相关的事情发生，这可能会变得很快。想象一下body下的100个元素，上面有三种颜色变化，你有300多行CSS，200 +（三分之二）不适用于任何一页。这不会考虑其他更改，例如背景颜色等。在这种情况下，最好设置不同的LESS文件，为@base导入不同的值集，并构建不同的样式表加载在需要它的页面上。但是，如果您只对页面进行一小部分颜色更改，这可能是一种有效的方法。

Answer 2

没有办法做到这一点。

LESS无法知道选择器body.foo是否会在编译时应用。

通过Mixin更新变量

2 个答案:

LESS是一个预处理器......