Css 创建带有断点的新引导类

我正在尝试使用bootstrap4断点创建一组新类，我想使用sas生成它们，但我有点不确定到底该怎么做

基本上，课程是这样的：

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

---

但显然，对于每个断点。我知道有一个

媒体断点关闭了

mixin，我可以使用它，但我不太确定如何正确地循环通过断点。

看看如何在

生成网格列

mixin in

网格框架.scss

中为每个断点创建引导网格列

你会做类似的事情

// loop through each breakpoint
@each $breakpoint in map-keys($grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .bg#{$infix}-img {
      ..
    }
}


// css for one breakpoint
// change style on sm only
@include media-breakpoint-between(sm, md){
  .bg-sm-img {
      ...
  }
}

---

演示：

我最终选择了一种更简单的方法，似乎效果很好：

@each $name, $value in $grid-breakpoints {
    @media all and (max-width: $value) {
        .bg-#{$name}-img {
            background-image: none !important;
        }
    }
}

---

你想用背景图像做什么？每个断点是否有不同的映像？你还添加了其他的类吗？这个部分有一个背景图片，我想隐藏它。通过创建一些独特的类，我可以很容易地做到这一点，但我正试图转向可以在其他地方重用的帮助器类。另外，弄明白这一点应该有助于我创建其他类。好吧，只是想弄明白为什么要“循环”，而不是只将其设置为1个断点。稍微调整了一下，但效果很好，谢谢<代码>@映射键中的每个$breakpoint（$grid breakpoints）{$infix:breakpoint infix（$breakpoint，$grid breakpoints）；@包括媒体断点关闭（$breakpoint）{.bg{$infix}-image{background image:none！important；}}