LESS - 插值 - 使用动态生成的类名作为 MIXIN 本身？答案

【问题标题】：LESS - Interpolation - Using dynamically generated class name AS A MIXIN itself?LESS - 插值 - 使用动态生成的类名作为 MIXIN 本身？
【发布时间】：2017-01-13 19:01:40
【问题描述】：

假设您想要一个接受参数的 mixin，并使用该参数调用不同的 mixin。

.text-right {
  text-align: right
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}


// mixin to call one of the above selectors
.text-align( @direction ) {
  .text-@{direction};
}

body {
  .text-align(right);
}

// Unrecognized input on this line
//   .text-@{direction};

尝试这样做会导致在您尝试插入参数的行上出现无法识别的输入。

Here's a codepen I made for it.

如何接受一个参数，然后使用该参数调用不同的 mixin（其中参数名称是 mixin 名称的一部分）？？

【问题讨论】：

这似乎是不可能的，但反过来是可能的：codepen.io/mtbottens/pen/rjLJaX #dinklage
视情况而定。如果您的示例是抽象的（不仅仅是关于 text-left-right-whatever 可以更容易编码），即它实际上是关于可重用的混入，那么只需不要将混入参数编码为混入名称。保持参数作为参数，考虑到这一点，整个故事确实应该完全相反，for example。
说到赏金，没有任何意义。答案很简单：“你不能”。（因此 cmets 建议修改您的方法，即使 Less 具有这样的功能，这也是有缺陷的）。

标签： less interpolation mixins

【解决方案1】：

你不能。不是这样的。 LESS源代码中的相关行在parser.js，mixin.call--mixin调用的解析器中：

e = parserInput.$re(/^[#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)

也就是说，有效的 mixin 调用只能命名为有效的 CSS .class 或 #id 标识符。其他一切都是不可解析的，甚至没有进入变量插值阶段。

如果我们放宽解决方案的要求，是有办法的。现在，我们想要一个函数，它接受类名的一部分，并使用该类名调用一个 mixin。如果可以忍受这不是完全动态的，我们可以简单地用一些when 子句来实现该功能：

.text-align( @direction ) when (@direction=left) {
  .text-left;
}
.text-align( @direction ) when (@direction=center) {
  .text-center;
}
.text-align( @direction ) when (@direction=right) {
  .text-right;
}

【讨论】：

谢谢，这也是我得出的结论。