css - 通过 Mixin 更新变量

Question

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

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

@base: #00000;

body.foo{
 @base = #FFF;
}

Answer 1

LESS 是一个预处理器，所以...

...这一切都必须提前预编译成 CSS。这意味着所有可能的类组合都需要提前变成有效的 CSS。如果你想要这样的东西，你需要在你的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;
}

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

Answer 2

没有办法做到这一点。

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