SASS嵌套选择器优先级疑问：双&引用为何不符合预期？

核心原因：你误解了SASS中&的替换逻辑 #

&不是提取父选择器的“基础类名”，而是完全继承当前层级的父选择器上下文，不同的嵌套结构会导致完全不同的编译结果。

具体场景拆解 #

1. 符合预期的正确嵌套结构：
   当你在父选择器（比如.div）的直接嵌套中写&__main &__example a，编译结果和优先级都会符合预期：

   .div {
     &__main &__example a {
       // 编译结果：.div__main .div__example a
       // 优先级：(0,2,1)（两个类选择器+一个元素选择器）
     }
   }
   

2. 导致优先级异常的常见错误场景：

   • 全局作用域使用&：如果没有父选择器直接写&__main &__example a，&会被解析为空，编译后变成__main __example a——这两个都是无效选择器，浏览器只会识别a，所以优先级是(0,0,1)。
   • 嵌套层级错误：如果你的代码写在&__main的嵌套里，&会继承.div__main这个上下文，而不是最初的.div：

     .div {
       &__main {
         &__example a {
           // 编译结果：.div__main__example a
           // 优先级：(0,1,1)（一个复合类选择器+一个元素选择器）
         }
       }
     }
     

     这种情况下生成的是复合类，而非两个独立的BEM类，自然优先级不符合预期。

3. 为什么&__main .div__example a能得到预期优先级？
   因为.div__example是你明确指定的类选择器，不管&__main的上下文如何，只要它是有效的类选择器，最终就会生成两个独立的类选择器组合，优先级自然正确。

正确写法参考 #

如果需要在&__main的嵌套里生成.div__main .div__example a，可以用@at-root跳出当前上下文：

.div {
  &__main {
    @at-root #{&}__example a {
      // 编译结果：.div__main .div__example a
    }
  }
}

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