Less 使用mixin分配css较少的变量

是否可以使用lesscss基于另一个变量分配变量

伪代码：

@userpick = red; /* this changes based on user pick */

@color1 = red;
@color2 = blue;

if( @userpick == @color1)
  @systempick = @color2
else( @userpick == @color2)
  @systempick = @color1    

我希望能够将

@systempick

用作颜色值，而不是css样式。例如：

border: 5px dashed @systempick;

---

您可以在mixin中使用卫士来更改所使用的颜色，例如

.a when (@userpick = @color1) {
  color: @color2;
}

.a when (@userpick = @color2) {
  color: @color1;
}

您可能会得到代码重复，但这是获得if语句的唯一方法

---

其他方法也有可能（例如，如果使用less.js，则使用内联javascript；如果使用dotless，则使用函数插件），但可能有点不成熟。

您可以在mixin中使用卫士来更改所使用的颜色，例如

.a when (@userpick = @color1) {
  color: @color2;
}

.a when (@userpick = @color2) {
  color: @color1;
}

您可能会得到代码重复，但这是获得if语句的唯一方法

---

其他方法也是可能的（例如，如果使用less.js，则使用内联javascript；如果使用dotless，则使用函数插件），但可能有点不太成熟。

我能够得到我需要的，但是这在less的PHP端口上可能不起作用。 这有点棘手，因为您只能分配一次变量。关于变量的范围也有一些限制。我还使用HSV比较颜色值（色调、饱和度、值）

---

我能够得到我所需要的，但是这在PHP端口上可能不起作用。 这有点棘手，因为您只能分配一次变量。关于变量的范围也有一些限制。我还使用HSV比较颜色值（色调、饱和度、值）

不使用混音，但解决您的愿望 如果将

@userpick

存储为字符串，则可以使用该字符串访问另一个基于它的变量名（变量变量），如下所示：

更少

@userpick：“蓝色”/*这将根据用户选择进行更改，并保存为字符串*/
@setAntivative:“@{userpick}-opp”；
//设置相反的值
@红色：蓝色；
@蓝色：红色；
@systempick:@@SetOperative；
.测试{
颜色：@systempick；
}

CSS输出（注意

蓝色

如何输出

#ff0000

，即

红色

）

由于您正在处理颜色，因此需要将

@userpick

保存为字符串，否则，LESS将自动为其分配十六进制值，而不是颜色名称。

不使用混音，而是解决您的需求 如果将

@userpick

存储为字符串，则可以使用该字符串访问另一个基于它的变量名（变量变量），如下所示：

更少

@userpick：“蓝色”/*这将根据用户选择进行更改，并保存为字符串*/
@setAntivative:“@{userpick}-opp”；
//设置相反的值
@红色：蓝色；
@蓝色：红色；
@systempick:@@SetOperative；
.测试{
颜色：@systempick；
}

CSS输出（注意

蓝色

如何输出

#ff0000

，即

红色

）

---

由于您正在处理颜色，因此需要将

@userpick

保存为字符串，否则，LESS将自动为其分配十六进制值，而不是颜色名称。

使用此解决方案的问题是，在不同样式上使用多种颜色时，可能无法管理复制。我已经发布了一个更新的解决方案。谢谢您的建议。使用此解决方案的问题在于，在不同样式上使用多种颜色时，复制可能无法管理。我已经发布了一个更新的解决方案。谢谢你的建议。

/* this changes based on user pick */
.test {
  color: #ff0000;
}