SASS自定义占位符在:focus伪类与.focus类上不生效求助

核心问题 #

你的代码有两个关键问题导致样式不生效：

• 嵌套在%button-styling内部的%btn-focus占位符作用域受限，且%button-styling本身未被任何实际选择器扩展，导致内部的@extend规则和占位符样式根本不会被编译输出。
• 伪类写法错误：聚焦伪类的标准写法是:focus，而非::focus（::用于伪元素，比如::before）。

修正后的代码示例 #

// 把聚焦样式占位符放在全局作用域
%btn-focus { 
  color: $white;
}

%button-styling {
  color: $grey;
  
  &:focus,
  &.focus {
    @extend %btn-focus;
  }
}

// 必须有实际选择器扩展这个占位符，样式才会被编译
.button {
  @extend %button-styling;
}

补充说明 #

• SASS的占位符（%）只有在被实际选择器@extend时才会生成对应的CSS代码，所以一定要确保最终有具体的选择器（比如.button）去扩展%button-styling。
• 如果不想把%btn-focus放在全局，也可以把它定义在%button-styling同级，避免作用域问题。

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