Question

我创建了一个mixin，它使用了argb（）方法（用于IE滤镜渐变）这个mixin接受一个参数，用于设置好变量名称以在变量列表中进行选择。这些变量存储六种颜色。

@var_foo: #FFFFFF;
@var_bar: #000000;

.setColor(@colorName){
    @colorVar: ~'@{var_@{colorName}}';
    @colorArgb: argb(@colorVar);
}

这导致我错误：错误评估函数argb：对象＃没有方法'toARGB'

似乎它不喜欢转义功能。当我直接用硬编码的@var_foo替换@colorVar时，它可以工作。我做错了什么，或者argb（）方法需要特别的东西吗？

谢谢

Answer 1

你错误地调用了构造的变量名。

您应该使用@@来呼叫variable from a variable name。

<强> LESS：

@var_foo: #FFFFFF;
@var_bar: #000000;

.setColor(@colorName) {
    @colorVar: 'var_@{colorName}';
    @colorArgb: argb(@@colorVar);
    color: @colorArgb;
}

.setColor(bar);

将返回此 CSS：

color: #ff000000;

Answer 2

我同意Martin的答案，但在我看来，你想要使用颜色属性设置两个变量，并且他的解决方案将主颜色变量保留为字符串。因此，我建议设置一个初始的getter变量，然后用它来设置两个颜色变量。这是一个例子（不知道你是如何使用这些颜色的，我只是把这里的东西放在一起 - 你不太可能使用background-color的IE格式argb，但你明白了这一点：< / p>

<强> LESS

@var_foo: #FFFFFF;
@var_bar: #000000;

.setColor(@colorName) {
  @getColor: 'var_@{colorName}';
  @colorVar: @@getColor;
  @colorArgb: argb(@@getColor);
}

.test {
  .setColor(foo);
  color: @colorVar;
  background-color: @colorArgb;
}

.test2 {
  .setColor(bar);
  color: @colorVar;
  background-color: @colorArgb;
}

CSS输出

.test {
  color: #ffffff;
  background-color: #ffffffff;
}
.test2 {
  color: #000000;
  background-color: #ff000000;
}

LessCSS：argb（）不处理具有动态名称的变量

2 个答案: