2

是否可以使用较少的css基于另一个变量分配一个变量？

伪代码：

@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;
4

3 回答 3

4

不使用 mixin，但可以解决您的需求

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

较少的

@userpick: "blue"; /* this changes based on user pick, saved as a string */
@setopposite: "@{userpick}-opp";

//set opposing values
@red-opp: blue;
@blue-opp: red;

@systempick: @@setopposite;

.test {
  color: @systempick;
}

CSS 输出（注意如何blue输出#ff0000，即red）

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

由于您正在处理颜色，因此@userpick需要将其保存为字符串，否则，LESS 将自动为其分配一个十六进制值而不是颜色名称。

于 2013-11-11T20:39:42.710 回答
0

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

.set_colors(#F00, #00F, #F00); /* pass red, blue and user pick */

.set_colors(@c1, @c2, @u) when (hue(@c1) = hue(@u)) and  (saturation(@c1) = saturation(@u)) and  (lightness(@c1) = lightness(@u)){
    @color1 = @c1;
    @color2 = @c2;
    @userpick = @c1;
    @systempick = @c2;
} 
.set_colors(@c1, @c2, @u) when (hue(@c2) = hue(@u)) and  (saturation(@c2) = saturation(@u)) and  (lightness(@c2) = lightness(@u)){
    @color1 = @c1;
    @color2 = @c2;
    @userpick = @c2;
    @systempick = @c1;
}
于 2012-05-09T15:19:16.147 回答
0

您可以在 mixins 中使用警卫来更改使用的颜色，例如

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

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

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

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

于 2012-05-09T05:18:13.790 回答