如何按断点扩展Bootstrap 4类？纯SASS解决跨媒体查询extend错误

我之前也碰到过这个坑！SASS确实不允许跨媒体查询使用@extend，因为它的核心逻辑是将选择器合并到一起，而媒体查询是带有条件的独立样式块，跨块合并会导致样式生成逻辑混乱，所以才会抛出那个报错。不过有几种纯SASS的方案能实现你想要的、类似Bootstrap断点类的效果：

方法一：使用混合宏（Mixin）封装样式 #

Mixin是SASS里用来复用代码的利器，它可以在媒体查询内部直接调用，完美避开@extend的限制。你可以把.table-sm的样式封装成mixin，然后在目标媒体查询里调用：

// 1. 封装.table-sm的样式为mixin（如果用Bootstrap源码，可直接复用官方变量）
@mixin table-sm {
  $table-cell-padding-sm: .5rem !default;
  th,
  td {
    padding: $table-cell-padding-sm;
    // 这里可以补充Bootstrap .table-sm的其他样式，比如边框间距等
  }
}

// 2. 在媒体查询里调用mixin，实现断点触发样式
@media (max-width: 800px) {
  table.table-md-sm {
    @include table-sm;
  }
}

如果你使用的是Bootstrap的SASS源码，其实官方已经封装了很多样式的mixin，比如针对表格的@mixin table-size()，直接调用即可，不用自己复制样式，更省心。

方法二：使用占位符选择器（Placeholder） #

占位符是SASS里的一种“隐形”选择器，它不会生成独立的CSS代码，只会被@extend引用合并。你可以把.table-sm的样式放到全局占位符里，然后在普通类和媒体查询里分别extend这个占位符：

// 1. 定义全局占位符，存放.table-sm的样式
%table-sm-styles {
  th, td {
    padding: .5rem;
    border-spacing: 0;
    // 其他.table-sm样式
  }
}

// 2. 普通的.table-sm类，extend占位符
.table-sm {
  @extend %table-sm-styles;
}

// 3. 媒体查询里的.table-md-sm，同样extend占位符
@media (max-width: 800px) {
  table.table-md-sm {
    @extend %table-sm-styles;
  }
}

这种方式的好处是样式代码只写一次，通过占位符复用，而且SASS允许在媒体查询里extend全局的占位符，不会触发报错。

总结 #

两种方法里更推荐用Mixin，它的灵活性更高，尤其是当你需要给样式传递参数（比如不同断点的内边距值）时，Mixin能轻松实现。而占位符更适合样式完全固定的复用场景。

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