基于Bootstrap 4断点创建自定义类的Sass实现方案咨询

嘿，这个需求其实很好实现！Bootstrap 4的Sass体系已经给我们封装好了断点变量和混合宏，咱们只需要用@each循环遍历所有断点，再结合media-breakpoint-down混合宏就能批量生成你要的类了。

具体实现代码 #

首先确保你已经导入了Bootstrap的核心Sass文件（至少要包含断点变量、函数和混合宏），然后添加这段代码：

// 先导入Bootstrap必要的Sass模块（如果还没导入的话）
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

// 遍历所有断点，生成对应类
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    .bg-#{$breakpoint}-img {
      background-image: none !important;
    }
  }
}

代码解释 #

• $grid-breakpoints是Bootstrap内置的断点映射变量，默认包含xs、sm、md、lg、xl这几个断点的名称和对应的宽度值。
• map-keys($grid-breakpoints)会提取出所有断点的名称，供@each循环逐个处理。
• media-breakpoint-down($breakpoint)混合宏会自动生成对应断点的max-width媒体查询，比如处理md断点时，生成的就是@media (max-width: 767.98px)（这里的.98px是Bootstrap的规范，用来避免刚好和断点宽度值冲突的情况）。
• 最后通过Sass变量插值#{$breakpoint}生成对应的类名，比如.bg-md-img、.bg-sm-img等。

生成后的CSS示例 #

以md断点为例，编译后会得到类似你给出的示例代码（只是宽度值按Bootstrap规范做了微调）：

@media (max-width: 767.98px) {
  .bg-md-img {
    background-image: none !important;
  }
}

而且如果之后你自定义了$grid-breakpoints（比如添加了xxl断点），这段代码会自动适配新的断点，完全不用修改循环逻辑～

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