SCSS中如何在父元素hover时选中BEM后缀命名的子元素

正确写法有3种可选，你可以根据代码习惯挑选： #

写法1：hover块内用插值语法（最贴近你原来的写法习惯）

你原来的写法错误原因是:hover 内的 & 会直接指代 .accordion:hover 这个整体，拼接__copy后会生成错误的选择器 .accordion:hover__copy，用插值语法取根选择器就能解决：

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;

  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;
   
    &--open {
      display: block;
    }
  }

  &:hover {
    #{&}__copy {
      // 你要写的样式，比如设置显示：
      display: block;
    }
  }
}

这段代码编译后会生成正确的后代选择器：.accordion:hover .accordion__copy #

写法2：子元素块内写hover逻辑（更符合BEM规范的写法习惯）

把父元素hover的状态判断直接写在子元素的样式块内，可读性更高：

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;

  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;
   
    &--open {
      display: block;
    }

    // 父元素hover时的样式
    .accordion:hover & {
      display: block;
    }
  }
}

写法3：提前存根选择器变量（嵌套层级深的时候更推荐）

如果你的组件嵌套层级比较多，提前把根选择器存为变量更不容易出错：

.accordion {
  $root: &; // 把.accordion存为变量
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
  font-family: "Raleway", sans-serif;
  background: #f4f4f4;

  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;
    color: gray;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 500;
   
    &--open {
      display: block;
    }
  }

  &:hover {
    #{$root}__copy {
      display: block;
    }
  }
}

内容的提问来源于stack exchange，提问作者Muddusar Zulfiqar