SASS嵌套伪类内使用@extend 生成伪类顺序不符合预期如何解决

问题原因 #

Sass的@extend默认选择器合并逻辑会将占位符内的伪类视为更通用的规则段，合并时前置到当前选择器的伪类之前，因此出现了伪类顺序颠倒的问题。

解决方案 #

改用@mixin实现即可，mixin会直接将样式代码注入当前嵌套层级，不会修改选择器的顺序，完全符合你的预期：

// 替换%占位符为mixin定义
@mixin ext {
  &:aaa {
    color: red;
  }
}

button {
  &:bbb {
    // 用@include引入，而非@extend
    @include ext;
  }
}

上述代码编译后得到的CSS就是你需要的结果：

button:bbb:aaa {
    color: red;
}

如果确实需要保留@extend的合并规则能力以减少重复代码，可以调整占位符的结构，将需要后置的伪类放到调用侧定义，不过对于你的场景直接用@mixin是成本最低的方案。

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