SCSS :hover选择器下父选择器&拼接内部类不生效问题

Sass 中 & 代表当前层级完整父选择器字符串，你在 &:hover 内使用 &-overlay 拼接时，& 已对应 .cds__card:hover，最终编译出的选择器为 .cds__card:hover-overlay，和实际 DOM 中的 .cds__card-overlay 不匹配，因此样式失效。

你写的错误代码编译后生成的无效CSS如下：

.cds__card:hover-overlay {
  background-color: blue;
}

解决方案 #

除直接书写完整类名外，还有两种符合BEM嵌套规范的实现方式：

方案1：最简嵌套写法 #

直接在hover伪类后拼接子元素选择器即可，此时第二个&仍指向.cds__card：

.cds{
    &__grid{
        // 其他样式
    }

    &__card{
        &-overlay{
            background-color: grey;
        }

        &:hover &-overlay{
            background-color: blue; 
        }
    } 
}

编译后生成的有效CSS为：

.cds__card-overlay {
  background-color: grey;
}
.cds__card:hover .cds__card-overlay {
  background-color: blue;
}

方案2：存储基础选择器为变量 #

如果需要多处复用基础选择器，可以将其存为变量后用插值语法调用：

.cds{
    &__grid{
        // 其他样式
    }

    &__card{
        $base-selector: &;
        &-overlay{
            background-color: grey;
        }

        &:hover{
            #{$base-selector}-overlay{
                background-color: blue; 
            }
        }
    } 
}

两种方案最终的渲染效果完全一致。

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