所以假设我将页面上 10 个元素的背景设置为@base,然后用户登陆“Foo”页面,该页面在页面主体上有类。
如何通过 css 声明更新@base?我知道变量是函数(或css声明)的本地变量,但必须有一种方法来做到这一点!(会使样式替代页面变得如此简单!)
@base: #00000;
body.foo{
@base = #FFF;
}
...这一切都必须提前预编译成 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
并构建不同的样式表以加载到页面上需要它。但是,如果您只是对页面进行一小部分颜色更改,那么这可能是一种有效的方法。
没有办法做到这一点。
LESS
无法知道选择器是否body.foo
会在编译时应用。