如何在2-3层嵌套的SCSS中正确使用hover伪类？

你遇到的核心问题是SCSS中&的引用规则导致的：当在&:hover内部使用&--img时，&会被替换成当前的父选择器.about__card:hover，编译后生成的是.about__card:hover--img（把hover伪类和修饰符直接拼接），这显然不是我们需要的.about__card:hover .about__card--img后代选择器，所以样式无法生效。

下面是两种简洁的解决方法：

方法1：使用父选择器变量 #

在&__card块内定义变量保存当前选择器，在hover块中调用该变量生成正确的后代选择器：

.about {
  display: flex;
  &__card {
    $card: &; // 保存当前选择器.about__card
    transition: all .5s;
    
    &--img {
      filter: grayscale(1);
    }
    
    &:hover {
      flex-grow: 2;
      #{$card}--img { // 编译后为.about__card:hover .about__card--img
        filter: grayscale(0);
      }
    }
  }
}

方法2：调整嵌套结构，将hover样式写在修饰符选择器内 #

把图片的hover样式直接嵌套在&--img块中，通过父级的hover状态触发：

.about {
  display: flex;
  &__card {
    transition: all .5s;
    
    &--img {
      filter: grayscale(1);
      // 父级&__card hover时修改当前图片样式
      &__card:hover & {
        filter: grayscale(0);
      }
    }
    
    &:hover {
      flex-grow: 2;
    }
  }
}

最终编译后的有效CSS #

两种方法都会生成你需要的正确CSS代码：

.about {
  display: flex;
}
.about__card {
  transition: all 0.5s;
}
.about__card--img {
  filter: grayscale(1);
}
.about__card:hover {
  flex-grow: 2;
}
.about__card:hover .about__card--img {
  filter: grayscale(0);
}

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