将范围传递给mixin

Question

我有以下mixin用于元素的常见活动/悬停状态：

@mixin hover-states {
  &:hover, &:active, &:focus {
    @content;
  }
}

当我像这样使用它时，这是有效的

.myClass {
  @include hover-states {
    color: red;
  }
}

但是，当我想使用父＆符号时，这不起作用：

.myClass {
  .myParent & {
    @include hover-states {
      background-color: red;
    }
  }
}

期望的行为是，当父项悬停时，子元素应该改变它的样式。但是这段代码会编译成以下CSS：

.myParent .myClass:hover, .myParent .myClass:active, .myParent .myClass:focus {
  background-color: red;
}

但它看起来应该是这样的

.myParent:hover .myClass, .myParent:active .myClass, .myParent:focus .myClass {
  background-color: red;
}

是否有任何方法（或符号？）将所需的范围传递给mixin，以便&:hover引用父元素而不引用子元素？

Answer 1

您可以使用selector-nest功能获得所需的结果

.myParent {
  @include hover-states {
    @at-root #{selector-nest(&, '.myClass')} {
      color: green;
    }
  }
}

编译的css看起来像这样

.myParent:hover .myClass, .myParent:active .myClass, .myParent:focus .myClass {
  color: green;
}

希望这有帮助