css - 更少的变量范围/上下文

Question

我的 less 代码是这样的:

body {
  @var: white;

  &.blue { @var: blue; }
  &.red { @var: red; }
  &.abc { @var: #badass; }

  background-color: @var;
}

我希望的是，如果 body 有类 .abc 变量 @var 的值是 #badass ，如果你有类.blue，值为blue等等。但事实并非如此，变量的值不会独立于它们的遗留类而改变。

Answer 1

您需要为此创建一个参数混合:

.bg(@color){
  background-color:@color;
}

然后下面的代码就可以工作了:

body {
  .bg("white");

  &.blue{ .bg("blue");  }
  &.red { .bg("red");   }
  &.abc { .bg(#bada55); }

}

您正在做的是行不通的，因为您正在重新分配变量 - 这完美地工作，但没有将新值写入类。 (如果 LESS 创建新规则，每次你只是重新分配一个变量，那将完全没有意义。)此外，与任何其他编程语言一样，LESS 具有范围，因此在它到达 background-color 时:@var ; @var 具有分配给它的值 white 并相应地创建规则。以下将起作用(但当然没有意义):

body {
  @var: white;

  &.blue{ @var: blue;    background-color: @var;}
  &.red { @var: red;     background-color: @var;}
  &.abc { @var: #bada55; background-color: @var;}
  background-color: @var;
}