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 中，您可以将完整的规则集存储在变量中（请参阅：detached rulesets feature）。您可能想尝试一下。