如何使用SASS实现hover时控制相邻兄弟元素的样式变化

问题原因 #

你写的Sass嵌套语法不符合&选择符的使用规则：&默认代表当前父选择器的完整值，直接在+后写&__child-2的写法无法被Sass正确解析，编译后会生成无效的CSS选择器，因此无法生效。

正确写法 #

你可以使用插值语法包裹&来实现你需要的拼接效果，代码如下：

.parent{
  &__child-1:hover + #{&}__child-2{
    background-color: green;
  }
}

上述代码编译后会生成你预期的有效CSS：

.parent__child-1:hover + .parent__child-2 {
  background-color: green;
}

你也可以选择直接写全目标类名，兼容性更强：

.parent{
  &__child-1:hover + .parent__child-2{
    background-color: green;
  }
}

内容的提问来源于stack exchange，提问作者john otor