我怎样才能有多个选择器的混合?
How can I have a mixin with multiple selectors?
以下代码:
.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)
}
如我所料产生:
* [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;
}
如何去掉 *
前缀,让选择器不带前缀?
不起作用的东西:
.positionBase(testing,16px,0)
* {
.positionBase(testing,16px,0)
}
和
{
.positionBase(testing,16px,0)
}
我的 Google foo 很弱,我没有发现任何让我认为这是可能的,在这种情况下我想使用 *
前缀,但这也很糟糕为了表现。有什么想法吗?
谢谢
只需 .positionBase(testing,16px,0);
即可(确保在末尾包含一个分号!如果遗漏,可能会导致较少的编译失败)
我在这里进行了测试: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);
以下代码:
.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)
}
如我所料产生:
* [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;
}
如何去掉 *
前缀,让选择器不带前缀?
不起作用的东西:
.positionBase(testing,16px,0)
* {
.positionBase(testing,16px,0)
}
和
{
.positionBase(testing,16px,0)
}
我的 Google foo 很弱,我没有发现任何让我认为这是可能的,在这种情况下我想使用 *
前缀,但这也很糟糕为了表现。有什么想法吗?
谢谢
只需 .positionBase(testing,16px,0);
即可(确保在末尾包含一个分号!如果遗漏,可能会导致较少的编译失败)
我在这里进行了测试: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);