Как создать свои медиа запросы на scss что бы совпадали с bootstrap?

Question

[freeman0204]

Это брекпоинты и ширина контейнера с файла _variables.scss хочу создать на scss свои медиа которые зависят и связаны с теми что есть в bootstrap что бы допиливать то что не могу сделать на bootstrap. Как это можно сделать?

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");

Comments

[Алекс Глебов]

@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

или

.some-class {
@include media-breakpoint-up(sm) {
    display: block;
  }
}

[freeman0204]

Алекс Глебов, второй вариант какой то странный. Почему include внутри .some-class?

[Алекс Глебов]

freeman0204, sass позволяет так делать.
.some-class во всех стилях объявляется только в 1 месте, удобно для поддержки кода.

[Сергей delphinpro]

freeman0204, второй вариант идеологически правильный.
Есть селектор. И все его стили описаны внутри него.

Answer 1

[Alexandr Alexandrov]

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

https://v4-alpha.getbootstrap.com/layout/overview/...

Comments

[freeman0204]

Вы имели введу писать в этих миксинах?

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

[Сергей delphinpro]

Зачем эти цифры при использовании sass?
В бутстрапе есть миксины для медиазапросов. Их и нужно использовать.

Answer 2

[Сергей delphinpro]

Вам нужно использовать встроенные миксины бутстрапа. Все они здесь https://github.com/twbs/bootstrap/blob/v4-dev/scss...

media-breakpoint-up()
media-breakpoint-down()
media-breakpoint-between()
media-breakpoint-only()

В качестве параметров передаётся название контрольной точки (ключи из переменной $grid-breakpoints) - xs, sm, md, lg, xl.