Css 通过Mixin更新变量

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

如何通过css声明更新@base？我知道变量是函数（或css声明）的局部变量，但必须有一个方法来做到这一点！（将使其他页面的样式设置变得如此简单！）

---

没有办法做到这一点

---

LESS

无法知道选择器

body.foo

是否将在编译时应用。

无法做到这一点

LESS

无法知道选择器

body.foo

是否将在编译时应用。

LESS是一个预处理器，因此。。。 …所有这些都必须提前预编译到CSS中。这意味着所有可能的类组合都需要提前生成有效的CSS。如果你想要这样的东西，你需要在你的生活中做如下的事情：

更少

@base:#000000；
.setColorOptions（@className:~''，@base:@base）{
@类点：转义（`（'@{className}'=''？''：'）`）；
@类：escape（@className）；
正文{classDot}{class}{
someElement{color:@base；}
.someClass{color:@base；}
//等等。
}
}
.setColorOptions（）；
.setColorOptions（foo，#fff）；
.设置颜色选项（条形，#ccc）；

CSS输出

body元素{
颜色：#000000；
}
身体，什么课{
颜色：#000000；
}
body.foo someElement{
颜色：#ffffff；
}
body.foo.someClass{
颜色：#ffffff；
}
body.bar元素{
颜色：#中交；
}
body.bar.某个类{
颜色：#中交；
}

显然如果有许多元素和许多颜色相关的事情发生，这可能会很快变大。想象一下，

body

下有100个元素，上面有三种颜色变化，有300多行CSS，其中200多行（三分之二）不适用于任何一个页面。这不考虑其他变化，如背景颜色等。在这种情况下，最好设置不同的LESS文件，为

@base

导入不同的值集，并构建不同的样式表以加载到需要它的页面上。但是，如果您只是对页面进行一小部分颜色更改，这可能是一种有效的方法。

LESS是一个预处理器，因此。。。 …所有这些都必须提前预编译到CSS中。这意味着所有可能的类组合都需要提前生成有效的CSS。如果你想要这样的东西，你需要在你的生活中做如下的事情：

更少

@base:#000000；
.setColorOptions（@className:~''，@base:@base）{
@类点：转义（`（'@{className}'=''？''：'）`）；
@类：escape（@className）；
正文{classDot}{class}{
someElement{color:@base；}
.someClass{color:@base；}
//等等。
}
}
.setColorOptions（）；
.setColorOptions（foo，#fff）；
.设置颜色选项（条形，#ccc）；

CSS输出

body元素{
颜色：#000000；
}
身体，什么课{
颜色：#000000；
}
body.foo someElement{
颜色：#ffffff；
}
body.foo.someClass{
颜色：#ffffff；
}
body.bar元素{
颜色：#中交；
}
body.bar.某个类{
颜色：#中交；
}

---

显然如果有许多元素和许多颜色相关的事情发生，这可能会很快变大。想象一下，

body

下有100个元素，上面有三种颜色变化，有300多行CSS，其中200多行（三分之二）不适用于任何一个页面。这不考虑其他变化，如背景颜色等。在这种情况下，最好设置不同的LESS文件，为

@base

导入不同的值集，并构建不同的样式表以加载到需要它的页面上。但是，如果您只是对页面进行了一小部分颜色更改，这可能是一种有效的方法。

+1始终提供如此出色的解决方案和建议！然后我觉得光是投票是不够的；-）+我总是提供如此优秀的解决方案和建议！然后我觉得光是投票是不够的；-）

@base: #00000;

body.foo{
 @base = #FFF;
}