SCSS中父元素Hover时子元素样式的BEM规范实现问询

没问题！要实现你想要的「在sidebar__logo的规则块内关联父元素sidebar的hover状态」，同时严格遵循BEM规范，你可以借助SCSS的@at-root指令和父选择器引用&来实现。具体代码如下：

.sidebar {
  width: 100px;

  &__logo {
    width: 40px;

    // 父元素hover时修改当前logo的宽度
    @at-root .sidebar:hover & {
      width: 80px;
    }
  }

  &:hover {
    width: 200px;
  }
}

写法解释： #

• @at-root的作用是跳出当前嵌套层级，让后面的选择器编译时不会带上sidebar__logo的前缀，避免生成错误的嵌套选择器。
• &在这里指代当前的sidebar__logo选择器，所以.sidebar:hover &最终会编译成.sidebar:hover .sidebar__logo，和你原来的功能完全一致，但结构更符合BEM的模块化要求。
• 这种写法把sidebar__logo的所有样式（包括父元素触发的状态）都集中在它自己的规则块内，更便于维护，完全契合BEM组件化的设计思想。

内容的提问来源于stack exchange，提问作者Amir Shahbabaie