Bourbonメディアクエリーで 'omega'を無視しています。

Question

私は現在Bourbon Neatを使用しています。 3 of 6列をタブレットに、2 of 6をデスクトップ以上に広げるには、.posts__postが必要です。しかし、私は私のデスクトップメディアのクエリが動作していないと、タブレットのクエリがデスクトップに残っていることを発見している。

_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）が尊重されていても解決できますが、2nとして残ります。

Answer 1

$デスクトップのメディアクエリが有効になると、$タブレットのオメガミックスインは取り消されません。 $ desktopでは、:nth-child(3n)には右余白がなく、3n+1は左にクリアされますが、2nにはまだ右余白がなく、2n+1はまだ左にクリアされています。

$タブレットクエリにmax-width値を含めるようにメディアクエリを編集する必要がある場合もあります。あなたは、ブレークポイントの幅と同じメディアクエリ変数に名前を付けるので、私は何かをお勧めしたい続けば

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

物事が混乱得ることができる：あなたのような何かを行うことができますので、痛みのあまりないのですem()のmixinと$mq-tabletのようになります。

また、Flexboxとspan-columns()を「ブロック崩壊」表示プロパティで使用することもできます。これには、デザインに応じてマークアップを追加する必要があります。

一般的な注意点として、問題を解決するための完全なデモを含めてください。