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

Question

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

我尝试使用＆＃34;命名参数＆＃34; LESS mixins创建一个通用mixin，用户可以在其中指定伪元素应该是:before还是:after。

当我编译时，我收到一个错误：＆＃34;无法识别的输入＆＃34;。

这是我的代码：

.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是两个已经存在且正常运行的混音。你能发现什么是错的吗？

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

Answer 1

仅

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

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

usage {
    .mixin(before);
}