less - 在 LESS 中使用 mixin 命名参数作为伪选择器

Question

我的想法是创建一个 LESS mixin，它可以添加伪元素:before或:after我页面中的任何元素。

我尝试使用 LESS mixin 的“命名参数”来创建一个通用 mixin，用户可以在其中指定伪元素应该是 a:before还是:after.

编译时出现错误：“无法识别的输入”。

这是我的代码：

.setInlineIcon(@iconx: 0; @icony: 0; @pos: before; @margin: 0; @margindir: right) {
  &:@{pos} {
    .setStructure(@h: 16px; @w: 16px; @d: inline-block; @va: middle);
    .getIcon(@iconx; @icony);

    content:"";
    margin-@{margindir}: @margin;
  }
}

哪里.setStrucutre和.getIcon是两个已经存在且功能正常的 mixin。你能看出哪里不对吗？

是因为我不能以这种方式将变量用作选择器吗？

Answer 1

:单独不被识别为有效的选择器标识符。解决方法是在选择器插值之前将其连接到标识符：

.mixin(@pos) {
    @name: ~':@{pos}';
    &@{name} {
        /* ... */
    }
}

usage {
    .mixin(before);
}