Question

假设你想要一个接受参数的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名称的一部分）??

Answer 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;
}

LESS - Interpolation - 使用动态生成的类名AS A MIXIN本身？

1 个答案: