用Sass混合宏控制断点渐变需绕过Bootstrap的bg-gradient类，直接封装background-image: linear-gradient()声明；复用其断点变量，显式设置fallback背景色，避免层叠覆盖与兼容性问题。
用 Sass 混合宏写断点渐变，别碰 bg-gradient 类
Bootstrap 5 的 bg-gradient 工具类本身不带断点逻辑，所有内置渐变类（如 bg-gradient-primary）都是全局生效的 CSS 规则，没法靠混合宏“注入”断点前缀。真正能用混合宏控制的，是 background-image: linear-gradient() 这条声明本身——你得绕过工具类，自己封装。
@mixin gradient-at-breakpoint 怎么写才不踩坑
核心是复用 Bootstrap 的断点变量、只改 background-image、保留基础背景色回退。以下是最简可用的混合宏写法：
@mixin gradient-at-breakpoint($breakpoint, $direction: 135deg, $color1: $primary, $color2: $secondary) {
@include media-breakpoint-up($breakpoint) {
background-image: linear-gradient($direction, $color1, $color2);
}
}
使用时直接套在选择器里：
.hero-section {
background-color: #fff; // 小屏 fallback
@include gradient-at-breakpoint(md, 90deg, #0d6efd, #20c997);
}
- 必须显式写
background-color在外层，否则小屏无背景 -
$direction默认用角度（90deg），不用to right——旧版 Safari 不认 - 颜色参数建议传变量（如
$primary），方便主题同步；硬编码色值会脱离调色板 - 别在混合宏里加
!important：优先级靠选择器权重解决，不是靠暴力覆盖
为什么 md:bg-gradient-primary 在 Sass 里也无效
这是 Tailwind 的语法，Bootstrap 的 Sass 编译器根本不识别 md: 前缀。即使你在 SCSS 文件里写了 md:bg-gradient-primary，编译后 CSS 里不会生成任何规则——它被当成普通类名原样输出，浏览器无法解析。
-
bg-gradient-primary本身只是个开关类，依赖background-image和background-color共同作用，单独存在不生效 - 试图在混合宏里
@extend .bg-gradient-primary也没用：它没断点包裹，@extend只是复制已有样式，不会凭空加媒体查询 - 如果你项目里真看到
md:bg-生效了，大概率是混入了 Tailwind CSS，不是 Bootstrap 的行为
多断点渐变怎么叠加才可控
比如“sm 用水平蓝青渐变，lg 升级为垂直紫橙渐变”，不能靠两个混合宏简单堆叠——CSS 层叠顺序会让后写的覆盖前写的，且媒体查询范围有重叠。稳妥做法是分层定义：
.feature-card {
background-color: #f8f9fa;
@include gradient-at-breakpoint(sm, 90deg, #0d6efd, #20c997);
@include gradient-at-breakpoint(lg, 180deg, #6f42c1, #fd7e14);
}
- 注意
sm和lg是向上生效（sm覆盖 ≥576px，lg覆盖 ≥992px），所以 lg 的规则天然覆盖 sm 区间，符合预期 - 方向值必须统一用角度：
180deg比to bottom更稳，尤其在 iOS 15 之前版本 - 如果需要深色模式适配，得额外加
@media (prefers-color-scheme: dark)块，混合宏里不自动处理这个维度
最易被忽略的是子元素遮挡：卡片内 .card-body 默认白底，会完全盖住容器渐变。得手动调低它的 background-color: rgba(255,255,255,0.9) 才透得出底层效果。
