使用＆__ *语法到达父选择器时，SASS / SCSS悬停

Question

是的，我很难定义问题。

一般情况如下： 在sass / scss中，我有一个带有一些变体的按钮：

.button {
   /* generic button styles here */
   &__icon {
       color: green;
   }
}

现在，我希望对每个变体使用一些悬停样式。但是因为使用了＆__ *，所以我似乎无法掌握如何重写父类名。

.button {
   /* generic button styles here */
   &__icon {
       color: green;
   }
   &:hover {
       .button__icon {
           color: red;
       }
   }
}

^^可以，但是很手工

sass中是否有一种方法可以访问父类并获得类似的信息：

&:hover {
    &__icon {
        color:red;
    }
}

但是这次＆__ icon应该引用父项。

与此相关的html看起来像这样：

<button type="button" class="button">
    [name]
    <span class="button__icon">+</span>
</button>

Answer 1

.button {
   $root: &;

   &__icon {
       color: green;
   }

   &:hover #{$root}__icon {
       color: red;
   }
}

或

.button {
   $root: &;

   &__icon {
       color: green;

       #{$root}:hover & {
           color: red;
       }
   }
}