0

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

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

@base: #00000;

body.foo{
 @base = #FFF;
}
4

2 回答 2

3

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并构建不同的样式表以加载到页面上需要它。但是,如果您只是对页面进行一小部分颜色更改,那么这可能是一种有效的方法。

于 2013-07-22T20:20:56.673 回答
0

没有办法做到这一点。

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

于 2013-07-22T19:34:59.090 回答