Question

我需要为我的Bootstrap变量创建一个大颜色工作的函数。不幸的是，LESS不允许你创建可以像他们一样调用的函数（例如@myvar：darken（@color，20％）;）。

doc站点上提供的选项是使用返回变量的mixin。当我使用变量被声明为属性值时，这对我来说效果很好，但我需要在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中构建一个独特的变量来解决这个问题，但无论如何我都找不到构建它。

.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);

Answer 2

变量实际上是常量，它们的范围仅基于上下文（它们出现在块中无关紧要）。由于上下文，当您在选择器块中调用它时，它才会有所不同。当您在顶层调用mixin时，您为该级别定义@var一次，并且不会被覆盖。

如果您必须使用变量，我建议您尝试使用上下文找到解决方案。 ~~例如，您可以尝试使用mixin guards & when(condition) {...}~~ （它实际上更简单，如下面的@ seven-phases-max所述）。这是一种在选择器的上下文之外运行mixin但仍在上下文中的方法（更新示例）：

& {
  .mixin(red);
  .test1 { color: @var; }
}
& {
  .mixin(blue);
  .test1 { color: @var; }
}

你实际上可以定义将被运行时使用Less的调用的函数，但是使用Less可以定义。例如，如果使用Node.js运行处理器，则可以执行此操作。但这是一个非常黑客而且不是微不足道的，因为你必须用JavaScript编写它们并将值包装在未记录的less.js类型中。

你也可以调用核心JavaScript将其封装在反引号中（这也是未记录的）。它适用于小块代码和核心功能：

length: unit(`Math.log(@{value})`, px);

如果从Node.js应用程序运行Less处理器，则可以通过这种方式调用自己的函数。

在LESS中使用mixins作为函数时，如何创建唯一变量？

2 个答案: