使用&；uu*时，SASS/SCSS悬停到达父选择器的语法

是的，我很难定义我的问题

一般情况如下： 在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;
    }
}

但这一次&\u图标应该引用父对象

此文件的html看起来有点像：

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

[姓名]
+

或

或

---

为什么不干脆做

&uu green{color:green；&:hover{color:red；}}

？你也可以添加HTML以确保我们讨论的是相同的结构吗？是的，你是正确的@somethinghere。。。我忘了提到，我还指的是当你有一个图标，也应该改变悬停的情况。我会修改我的问题，以适应仍然不是问题的额外信息，对吗？图标与子类相关，而不是与父类相关，真的吗？如果你的问题是“我如何选择父对象”，那么在CSS中没有真正的方法可以做到这一点。是的，CSS没有父对象选择器。检查我的最新问题。如果sass能够解释&：hover{&&&&uuicon{}}的嵌套，并且它引用父对象而不是hoverIt，那么问题就更大了。我以前尝试过这个方法，但说实话，这只需要一种不同的方法：为图标提供一个悬停状态，而不是为悬停提供一个图标类型。sass的问题是，一旦你嵌套它就不记得父对象了，它会记得整个选择器，那么它怎么知道你可能会提到哪些潜在的父对象呢？我认为这就是SASS不支持它的原因。但如果它存在，我会感兴趣的。不过我怀疑！为什么不干脆做

&uu green{color:green；&:hover{color:red；}}

？你也可以添加HTML以确保我们讨论的是相同的结构吗？是的，你是正确的@somethinghere。。。我忘了提到，我还指的是当你有一个图标，也应该改变悬停的情况。我会修改我的问题，以适应仍然不是问题的额外信息，对吗？图标与子类相关，而不是与父类相关，真的吗？如果你的问题是“我如何选择父对象”，那么在CSS中没有真正的方法可以做到这一点。是的，CSS没有父对象选择器。检查我的最新问题。如果sass能够解释&：hover{&&&&uuicon{}}的嵌套，并且它引用父对象而不是hoverIt，那么问题就更大了。我以前尝试过这个方法，但说实话，这只需要一种不同的方法：为图标提供一个悬停状态，而不是为悬停提供一个图标类型。sass的问题是，一旦你嵌套它就不记得父对象了，它会记得整个选择器，那么它怎么知道你可能会提到哪些潜在的父对象呢？我认为这就是SASS不支持它的原因。但如果它存在，我会感兴趣的。不过我怀疑！是的，这看起来不错，而且很有效。谢谢@mwl我想写一篇关于这个的博客文章，我会在里面推荐你的建议谢谢：）给我一个链接！是的，这看起来不错，而且很有效。谢谢@mwl我想写一篇关于这个的博客文章，我会在里面推荐你的建议谢谢：）给我一个链接！

.button {
   $root: &;

   &__icon {
       color: green;
   }

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

.button {
   $root: &;

   &__icon {
       color: green;

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