Bourbonガイドが4列を表示してもまだ12列使用

Question

私は構築中の静的なOctopressサイトでBourbonとNeatを使用しています。ガイド（$visual-grid: true;）をオンにする以外は、_grid-settings.scssファイルを変更せずに使用しています。私のscreen.scssでは、私はブルボン後グリッドの設定をロードしますが、ニートの前にしています：

@import "bourbon/bourbon"; 
@import "grid-settings"; 
@import "neat/neat"; 

私は小さな画面だけ広い4列である必要があり、デフォルトのグリッド設定を使用していますので。

$phone-portrait: new-breakpoint(max-width $tiny-screen 4); // 450px 

私は450px未満の画面にサイトを表示すると、視覚的なグリッドは4列を示しているが、レイアウトはまだ12本のカラムを使用しています。レイアウトに4列のdivを使用している場所がいくつかありますが、モバイルではページが4列しかないためページ幅が3分の1にすぎないため、これらは全幅にする必要があります。 @include span-columns(4)を@include span-columns(12)に置き換えて、モバイルで12の列を使用していることを確認できます。 12列のdivはモバイル上の全幅である唯一のdivです。

ガイドとレイアウトの両方で同じ数の列を使用していないのはなぜですか？

Answer 1

を支援します列の数を変更するブレークポイント（$phone-portrait: new-breakpoint(max-width $tiny-screen 4);）最初は、実際に何が起こっているのか理解するまで、これは奇妙に思えました。 divを4つの列にまたがるように設定していたとき、neatは列の数をとり、現在のブレークポイントの合計列数で除算します。私の場合、これは0.333になり、divの幅のパーセンテージとして使用されます。問題は、列の総数が後で変更されてもブレークポイントが変更されても、これは変更されません。私のdivは常に33.3％の幅になるだろう。私は何をする必要があることspan-columnsは、ブレークポイントのメディアセレクタの内側に含まれる繰り返しで、次のように：

$phone-portrait: new-breakpoint(max-width $tiny-screen 4); 

.my-div { 
    @include span-columns(4); 
} 

@include media($phone-portrait) { 
    .my-div { 
     @include span-columns(4); 
    } 
} 

これは私のdivは$phone-portraitブレークポイントのために広い100％であることが保証されます。

Answer 2

私は、あなたは自分のコードからコンマが欠けていると思いますが、必要があると思う：

$phone-portrait: new-breakpoint(max-width $tiny-screen, 4); // 450px 

希望、これはこれは、問題は内のdivに@include span-columns(4)を使用していないためであったが判明し