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?
thanks
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)I tested it out here: http://lesstester.com/ and it worked just fine.