Точка останова Sass: или запросы для нескольких точек останова

Question

У меня установлено несколько контрольных точек:

$breakpoint-tiny : 0 767px;
$breakpoint-small : 768px 991px ;
$breakpoint-medium : 992px 1229px;
$breakpoint-large : 1230px;

Я видел в документах точки останова

Вы также можете написать ИЛИ медиа-запросы, что позволит вам написать несколько разных базовых или составных медиа-запросов и применять их, если какой-либо из наборов запросов совпадает.

То, что я хотел бы сделать, это использовать их или запросы для нацеливания на несколько точек останова при необходимости в моем коде. Например:

@include breakpoint($breakpoint-medium, $breakpoint-large){
   .mobile-navigation{display: none;}
}

Это возможно?

Answer 1

Вы должны передать один параметр (список) вместо двух.

Попробуй это.

@include breakpoint(($breakpoint-medium, $breakpoint-large)) {
    .mobile-navigation{display: none;}
}

Я заключил в переменные, разделенные запятыми, скобки. Теперь Sass будет видеть их как один список, а не два параметра.

Answer 2

В точках останова компаса нет запросов ИЛИ, в частности @include breakpoint(($breakpoint-medium, $breakpoint-large)) не удается с:

ВНИМАНИЕ: Отзывчивый контекст недоступен для or Запросы относительно того, какой запрос использовать, неоднозначны. Пожалуйста, используйте только одиночные контекстные запросы. Используется контекст по умолчанию.

Вы можете использовать OR запросы с простым CSS @media правила, если вам это действительно нужно.

Правильное решение - не указывать максимальную ширину для ваших точек останова, только минимальную ширину. Тогда начните писать свои сайты без точек останова ("сначала мобильный"). Если макет нужно изменить на определенной ширине, вы @include breakpoint($brk) и изменить макет для всех ширин, превышающих $brk, Таким образом, вам никогда не придется указывать список интервалов, к которым применяется медиа-запрос.