Question

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;}

有没有办法将父级分配给变量或以其他方式实现我所追求的目标？

谢谢。

P.S。这是我的实际嵌套：

.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 {
          ...
        }
      }
    }
  }

Answer 1

进行了以下工作：

.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');

这似乎可以解决问题。

将父选择器设置为变量

1 个答案: