使用断点创建新的引导程序类

Question

我正在尝试使用bootstrap 4断点创建一堆新类，并且我想使用sass来生成它们，但是我不太确定该怎么做。

基本上，类是这样的：

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

但是显然对于每个断点。我知道我可以使用media-breakpoint-down mixin，但是我不确定如何正确地循环通过断点。

Answer 1

看看如何在make-grid-columns的{​​{1}}混合中为每个断点创建Bootstrap网格列。

您会做类似的事情...

grid_framework.scss

演示：https://www.codeply.com/go/Zjk1ybVJHZ

Answer 2

我最终选择了一种似乎更有效的简单方法：

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