如何重写@extend相关SCSS代码使其通过SASS构建

问题根源 #

你遇到的编译报错是Sass的语法限制：Sass不允许直接@extend 带伪类、伪元素的复合选择器，编译器给出的@extend .form-control, :focus;修改提示是完全错误的——这个写法会把扩展目标拆成两个独立选择器，最终生成的选择器逻辑完全偏离预期，必然导致样式失效。

可行修复方案 #

你可以根据自己的项目场景选下面任意一种方案：

• 方案1：抽离公共样式为@mixin（最推荐，无兼容问题）
  把.form-control:focus里的核心焦点样式抽成可复用的mixin，在需要的地方直接引入，完全避开@extend的语法限制，也不会出现选择器错乱的问题：

  // 先定义公共焦点样式mixin
  @mixin shared-form-focus {
    outline: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
    // 其他和.form-control:focus一致的样式都放这里
  }
  
  // 原有表单控件焦点样式引用mixin
  .form-control:focus {
    @include shared-form-focus;
  }
  
  // 你的复选框聚焦样式直接引用mixin即可
  .form-check-label input[type='checkbox']:focus + label::before {
    @include shared-form-focus;
  }
  

• 方案2：使用Sass占位符选择器配合@extend
  如果你更习惯用@extend的样式合并逻辑，可以把公共焦点样式定义为占位符选择器，再分别扩展：

  // 占位符选择器不会单独生成样式，只会在被extend时合并
  %shared-form-focus {
    outline: 0;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
  }
  
  .form-control:focus {
    @extend %shared-form-focus;
  }
  
  .form-check-label input[type='checkbox']:focus + label::before {
    @extend %shared-form-focus;
  }
  

• 方案3：基于UI框架直接调用内置方法
  如果你是基于Bootstrap这类已有UI框架开发，不需要自己抽样式，直接调用框架内置的表单焦点mixin即可，效果和原生.form-control:focus完全一致：

  .form-check-label input[type='checkbox']:focus + label::before {
    // Bootstrap 5内置的焦点样式mixin，直接调用即可
    @include form-control-focus();
  }
  

注意：不要使用编译器提示的拆分写法，该写法生成的选择器会要求伪元素本身携带form-control类、或者伪元素本身触发:focus状态，和你要给label前置伪元素加表单焦点样式的需求完全不匹配。

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