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）。你可能想试试它。

mixI返回一个自定义变量名称

1 个答案: