能否在预定义选择器链中插入选择器？（支持SASS）

你之前用SASS @extend的写法不对——@extend需要指定完整的目标选择器（或占位符），而不是单个类名.class1。针对你的场景，有几种可行的解决办法：

方法1：重构第三方SASS源码（最优解，若能操作） #

如果第三方库提供SASS源码，把样式逻辑抽成占位符选择器，让原生选择器和你的自定义选择器共同继承：

// 把第三方的样式抽成可复用的占位符
%class3-shared-styles {
  // 第三方原有的样式规则
  color: #333;
  padding: 8px;
  border: 1px solid #ddd;
}

// 第三方原生选择器继承占位符
.class1 .class2 .class3 {
  @extend %class3-shared-styles;
}

// 你的自定义选择器同样继承占位符
.class1 .class2 div .class3 {
  @extend %class3-shared-styles;
}

编译后会自动生成两个选择器共享样式的CSS，避免代码重复，后续样式更新也只需修改占位符。

方法2：直接继承第三方完整选择器（仅适用于能引入第三方源码/未压缩CSS） #

如果无法修改第三方源码，但能在SASS中引入其未压缩的CSS或SASS文件，可以直接继承完整的第三方选择器：

// 先引入第三方样式文件
@import 'path/to/third-party-styles';

// 自定义选择器继承第三方完整选择器
.class1 .class2 div .class3 {
  @extend .class1 .class2 .class3;
}

编译后会生成合并后的选择器：

.class1 .class2 .class3, .class1 .class2 div .class3 {
  // 第三方的样式规则
}

注意：如果第三方CSS是压缩过的（比如选择器被合并或简写），这种方法可能失效。

方法3：复制样式规则（兜底方案） #

如果以上两种方法都用不了，直接复制第三方.class1 .class2 .class3的所有样式规则到你的自定义选择器中。缺点是后续第三方样式更新时，需要同步复制修改，但胜在简单直接。

额外优化：用CSS变量统一维护 #

不管用哪种方法，都可以把第三方的样式值定义成CSS变量，减少重复维护成本：

// 定义变量
$class3-color: #333;
$class3-padding: 8px;
$class3-border: 1px solid #ddd;

// 第三方选择器
.class1 .class2 .class3 {
  color: $class3-color;
  padding: $class3-padding;
  border: $class3-border;
}

// 自定义选择器
.class1 .class2 div .class3 {
  color: $class3-color;
  padding: $class3-padding;
  border: $class3-border;
}

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