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

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