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

Question

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

我曾尝试使用较少混入的"命名参数"创建一个通用的混入其中,用户可以指定伪元素是否应该是一个: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两个已经存在的和功能的混入.你能发现什么是错的吗？

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

Answer 1

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

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

usage {
    .mixin(before);
}