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;
}

这可能吗？ 我可以采用其他方法来获得相同的结果吗？

我知道在此特定示例中，淡入淡出将是最可行的解决方案，但总的来说，从变量创建变量是一件可以在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中，您可以将完整的规则集存储在变量中（请参阅： 分离式规则集功能 ）。 您可能要尝试一下。