LESS mixin返回自定义变量名

Question

我想知道是否可以创建一个可以返回自定义变量名的mixin。

例如，我使用这个mixin来返回一个rgba值。

.fadeColor(@color: #000; @opacity: 1) {
  @returnColor: rgba(red(@color), green(@color), blue(@color), @opacity);
}

然后我可以做一些简单的事情，比如：

.class {
  .fadeColor(#f00, .5);
  color: @returnColor;
}

我会收到我褪色的红色短信。

理想情况下，我想让mixin做的是取一个将作为返回值的名称，这样我就可以做一些事情，比如：

.class {
  .fadeColor(@myColor, #f00, .5);
  color: @myColor;
  .fadeColor(@myBG, #00f, .7);
  background-color: @myBG;
}

这可能吗？有没有一种不同的方法可以让我得到同样的结果？

我知道在这个特定的例子中，fade将是最可行的解决方案，但一般来说，就是从变量中创建一个变量——这是可以用LESS完成的事情。

Answer 1

您可以将变量名存储在一个变量中，并用两个@@variable调用它。不过，您必须将内部变量的名称存储在某个地方。你可以试试这样的东西：

.fadeColor(@name; @color: #000; @opacity: 1) {
  @return: rgba(red(@color), green(@color), blue(@color), @opacity);
}
.class1 {
    @name: return;
    .fadeColor(@name; blue; 1);
    border-color: @@name;
}
.class2 {
    @myColor: return;
    @myBG: return;
    &{
      .fadeColor(@myColor, #f00, .5);
      color: @@myColor;
    }
    &{
      .fadeColor(@myBG, #00f, .7);
      background: @@myBG;
    }
}

将产生：

.class1 {
  border-color: #0000ff;
}
.class2 {
  color: rgba(255, 0, 0, 0.5);
  background: rgba(0, 51, 255, 0.7);
}

这可能会引入很多不必要的代码。我不知道你想做什么，但你可能会找到更好的方法来实现你想要的，而不需要mixin来返回值。例如，您可以将属性作为参数发送：

.fadeColor(@property; @color: #000; @opacity: 1) {
    @{property}: rgba(red(@color), green(@color), blue(@color), @opacity);
}
.class2 {
    .fadeColor(color, #f00, .5);
    .fadeColor(background, #00f, .7);
}

在Less 1.7.0中，您可以将完整的规则集存储在变量中（请参阅：分离的规则集功能）。你可能想尝试一下。