Less 少变数：我如何只选择几组颜色中的一组？

我想定义多组品牌颜色，并只选择其中一种在构建时使用（使用Grunt）

例如（在伪代码中）：

然后在Grunt中，在运行less构建之前设置@brand变量

我真的很难找到一种用更少的资源来实现这一点的方法（但在Sass中似乎相当简单）。

使用，就像这样：

@brand: null;
.setColors(@brand); //call setter mixin

.setColors(null) { //default
  @colour1: pink;
  @colour2: purple;
  @colour3: cyan;
  @colour4: white;

  @globalTextColor: @colour1;
  @bodyBackgroundColor: @colour2;
  @linkTextColor: @colour3;
  @linkTextHoverColor: @colour4;
}

.setColors(brand1) { 
  @colour1: red;
  @colour2: blue;
  @colour3: green;

  @globalTextColor: @colour1;
  @bodyBackgroundColor: @colour2;
  @linkTextColor: @colour3;
  @linkTextHoverColor: @colour1;    
} 

.setColors(brand2) {
  @colour1: orange;
  @colour2: black;

  @globalTextColor: @colour1;
  @bodyBackgroundColor: @colour2;
  @linkTextColor: @colour1;
  @linkTextHoverColor: @colour1;
}

另外，在您发布的原始代码中，在一些颜色设置之后省略了分号，因此您需要使用这些分号来解析它

解释

---

设置

@brand

变量时，将在

.setColors（@brand）中使用该变量

mixin调用，然后将查找与变量设置的“模式”匹配的颜色，如果找到，则输出这些颜色变量以供使用。如果未找到，您将得到一个编译错误，即未找到与模式不匹配的的匹配定义，这将告诉您尚未定义“品牌”设置。

欢迎使用Stack Overflow，并感谢您编写了一个很好的问题，其中包含了足够的代码来理解您想要的内容。

@brand: null;
.setColors(@brand); //call setter mixin

.setColors(null) { //default
  @colour1: pink;
  @colour2: purple;
  @colour3: cyan;
  @colour4: white;

  @globalTextColor: @colour1;
  @bodyBackgroundColor: @colour2;
  @linkTextColor: @colour3;
  @linkTextHoverColor: @colour4;
}

.setColors(brand1) { 
  @colour1: red;
  @colour2: blue;
  @colour3: green;

  @globalTextColor: @colour1;
  @bodyBackgroundColor: @colour2;
  @linkTextColor: @colour3;
  @linkTextHoverColor: @colour1;    
} 

.setColors(brand2) {
  @colour1: orange;
  @colour2: black;

  @globalTextColor: @colour1;
  @bodyBackgroundColor: @colour2;
  @linkTextColor: @colour1;
  @linkTextHoverColor: @colour1;
}