Bourbon Neat игнорирует «omega» в запросе на медиа

Question

В настоящее время я использую Bourbon Neat. Мне нужно .posts__post до диапазона 3 из 6 столбцов на планшете, а затем 2 of 6 на рабочем столе и выше. Однако я обнаружил, что мой настольный мультимедийный запрос не работает и что запрос планшета остается на рабочем столе.

_grid.scss

$tablet: em(768); 
$desktop: em(960); 

// Breakpoints 
$tablet: new-breakpoint(min-width $tablet 6) ; 
$desktop: new-breakpoint(min-width $desktop 6); 

posts.scss

@include media ($tablet) { 
.posts__post{ 
    @include span-columns(3 of 6); 
    @include omega(2n); 
    } 
} 

@include media ($desktop) { 
.posts__post{ 
    @include span-columns(2 of 6); // only spans up to 4 columns in total 
    @include omega(3n); // still remains as 2n 
} 

Вот что им пытаются добиться для [рабочего стола] [1. Не уверен, что я делаю неправильно. Это может быть разрешено, если запрос омега (3n) в $ desktop media соблюдается, однако его нет и остается равным 2n.

Answer 1

Проблема заключается в том, что при вводе запроса $ desktop media он не отменяет $ omega mixin. Таким образом, на $ desktop у вашего :nth-child(3n) нет правого края, а 3n+1 очищается влево, но 2n по-прежнему не имеет правого края, а 2n+1 по-прежнему очищается слева.

Возможно, вам потребуется отредактировать свои медиа-запросы, чтобы включить значение max-width в запрос $ tablet. С em() Mixin, что не так много боли, так как вы можете сделать что-то вроде:

$tablet:  em(768); 
$tablet-max: em(959); 
$desktop: em(960); 

вещи могли бы получить в заблуждение, если вы по-прежнему называть переменную медиа запросов такой же, как точки останова ширины, так что я хотел бы предложить что-то подобный $mq-tablet.

В качестве альтернативы вы можете использовать Flexbox и span-columns() с свойством отображения «блокировка-сбой». Это может потребовать некоторых дополнительных настроек для разметки в зависимости от вашего дизайна.

В общем примечании, пожалуйста, включите полную рабочую демонстрацию проблемы, чтобы помочь в ее решении.