LESS

Question

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

.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 名称的一部分）？？

Answer 1

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

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

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

如果放宽对解的要求，还是有办法的。现在，我们想要一个函数，它接受 class 名称的一部分，并调用具有该 class 名称的混合。如果可以接受不是完全动态的，我们可以简单地用一些 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;
}

LESS - 插值 - 使用动态生成的 class 名称作为 MIXIN 本身？

LESS - Interpolation - Using dynamically generated class name AS A MIXIN itself?

interpolation

mixins