css - 在 LESS 中使用 mixin 作为函数时如何创建唯一变量？

Question

我需要为我的 Bootstrap 变量创建一些大型颜色工作的函数。不幸的是，LESS 不允许您创建可以像他们那样调用的函数(例如 @myvar: darken(@color, 20%);)。

文档站点上提供的选项是使用返回变量的混合。当我在变量被声明为属性值的地方使用它时，这对我来说效果很好，但我需要在 Bootstrap variable.less 文件中的许多变量上运行我的新 mixin。如果我在那里多次调用 mixin，它总是返回第一种颜色。

有效部分:

.mixin(@color) {
  @var: @color;
}
.caller-1 {
  .mixin(blue);
  color:@var;
}
.caller-2 {
  .mixin(red);
  color:@var;
}

CSS

.caller-1 {
  color:blue;
}
.caller-2 {
  color:red;
}

什么不起作用:

.mixin(blue);
@color-1: @var; // My value is now blue

.mixin(red);
@color-2: @var; // My value is also blue

我以为我可以通过在混入中构建一个独特的变量来解决这个问题，但无论如何我都找不到构建一个。

.mixin(@color; @num)
  @var+@{num}: @color;
}
.mixin(blue; 1);
@color-1: @var1;

.mixin(red; 2);
@color-2: @var2;

关于如何在 mixin 中创建变量名的任何想法或关于如何使其像 LESS 函数一样工作的其他想法？

Answer 1

您现在无法在 LESS 中动态定义变量，但您可以动态定义选择器(正如您可能知道的那样)。我将仅举一个例子，并留给您将其应用于颜色/变量问题。

.towerMaker (@index) when (@index > 0)  {
   .block-@{index} {
      z-index: @{index};
    }

  .towerMaker(@index - 1);
}
.towerMaker (7);