div .mymixin('red','green')
.mymixin(@a, @b){
a {
color: @a;
span {
color: @b;
}
}
}
此代码将产生以下CSS：
div a{color:red;}
div a span{color: green;}
我需要它来产生这个：
div a{color:red;}
div:not(.open) a span{color: green;}
我正在尝试做这样的事情：
div .mymixin('red','green')
@parent: &;
.mymixin(@a, @b){
a {
color: @a;
@{parent}:not(.open) span {
color: @b;
}
}
}
但这不是正确的方法，产生
div a &:not(.open) span{color:green;}
有没有一种方法可以为变量分配父对象，或者以其他方式实现我所追求的目标？
谢谢你。
PS这是我实际的嵌套：
.icfld(@name, @width, @height, @opacity, @open) {
> a {
...
> .icon {
...
}
&.disabled > .icon {
...
}
//&:not(.open) :not(.disabled):hover... will NOT work, because & at this point refers to
//"parent" > a and makes it "parent" > a:not(.open), while I need "parent":not(.open)
//the following line, however, works
&:not(.disabled):hover {
& when (@open=false) {
...
> .icon {
...
}
}
}
}
解决了以下问题：
.mymixin2(@a, @b, @open){
a {
color: @a;
& when(@open = false){
span {
color: @b;
}
}
}
}
.mymixin1(@a,@b){
&.open {.mymixin2(@a,@b,true);}
&:not(.open) {.mymixin2(@a,@b,false);}
}
div .mymixin1('red', 'green');
这似乎可以解决问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句