Создать новые классы начальной загрузки с точками останова

Question

Я пытаюсь создать кучу новых классов, используя точки останова начальной загрузки 4, и я хочу использовать sass для их генерации, но я немного не уверен, как именно это сделать.

В основном классы будут такими:

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

Но, очевидно, для каждой точки останова. Я знаю, что есть какой-то миксин media-breakpoint-down, но я не совсем уверен, как правильно проходить через точки останова.

Answer 1

Я остановился на более простом подходе, который, кажется, хорошо работает:

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

Answer 2

Посмотрите, как создаются столбцы сетки Bootstrap для каждой точки останова в make-grid-columns mixin в grid_framework.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 {
      ...
  }
}

Демо: https://www.codeply.com/go/Zjk1ybVJHZ