如何在多个选择器中使用mixin？

The following code:

以下代码:

.positionBase (@name,@size: 16px,@position: 0) {
    [disabled] .icon.@{name}, .disabled .icon.@{name}, .disabled.icon.@{name} {
        background-position: @position*@size -@size;
    }

    .icon.@{name} {
        background-position: @position*@size 0;
    }

    .icon.@{name}.dark {
        background-position: @position*@size -2*@size;
    }

    .icon.@{name}.dark:hover, a:hover .icon.@{name}.dark, button:hover .icon.@{name}.dark, .button:hover .icon.@{name}.dark, .interactable:hover .icon.@{name}.dark {
        background-position: @position*@size -3*@size;
    }
}

* {
    .positionBase(testing,16px,0)
}

produces as I would expect:

按照我的预期生产:

* [disabled] .icon.testing,
* .disabled .icon.testing,
* .disabled.icon.testing {
  background-position: 0px -16px;
}
* .icon.testing {
  background-position: 0px 0;
}
* .icon.testing.dark {
  background-position: 0px -32px;
}
* .icon.testing.dark:hover,
* a:hover .icon.testing.dark,
* button:hover .icon.testing.dark,
* .button:hover .icon.testing.dark,
* .interactable:hover .icon.testing.dark {
  background-position: 0px -48px;
}

How do I get rid of the * prefix and just have the selectors without the prefix?

如何摆脱*前缀,只有没有前缀的选择器?

Things that don't work:

不起作用的事情:

.positionBase(testing,16px,0)

* {
    .positionBase(testing,16px,0)
}

and

{
    .positionBase(testing,16px,0)
}

My Google foo is weak, I've found nothing that would make me think this is possible, in which case I want to use the * prefix, but that is also very bad for performance. Any ideas?

我的谷歌foo很弱,我发现什么都不会让我觉得这是可能的,在这种情况下我想使用*前缀,但这对性能来说也是非常糟糕的。有任何想法吗?

thanks

1 个解决方案

#1

Just .positionBase(testing,16px,0); should work (make sure you include a semi-colon at the end! That can cause less compilation to fail if left out)

只是.positionBase(测试,16px,0);应该工作(确保你在结尾包括一个分号!如果省略,可以导致较少的编译失败)

I tested it out here: http://lesstester.com/ and it worked just fine.

我在这里测试了它:http://lesstester.com/它工作得很好。

.positionBase (@name,@size: 16px,@position: 0) {
    [disabled] .icon.@{name}, .disabled .icon.@{name}, .disabled.icon.@{name} {
        background-position: @position*@size -@size;
    }

    .icon.@{name} {
        background-position: @position*@size 0;
    }

    .icon.@{name}.dark {
        background-position: @position*@size -2*@size;
    }

    .icon.@{name}.dark:hover, a:hover .icon.@{name}.dark, button:hover .icon.@{name}.dark, .button:hover .icon.@{name}.dark, .interactable:hover .icon.@{name}.dark {
        background-position: @position*@size -3*@size;
    }
}

.positionBase(testing,16px,0);

#1