問題タブ [neat]

Bourbon Neat では、span-column()mixin と一緒にmixin を使用して、foundation 5 のブロック グリッドに似たものomega()を作成できます。automatic columnsただし、メディア クエリ間でスタイルを共有する場合、これらは惨めに失敗するようです。以下の例を見てください。

nth-child の位置を使用して行の最後の項目からマージンを削除しますが、メディア クエリが発生したときに、オメガを変更している場合、他の CSS は上書きされません。したがって、最初のメディア クエリは期待どおりに機能します。次に、$ipadクエリがトリガーnth-child(3n)されると、CSS に残り、クエリが中断され$ipadます。これを回避する方法はありますか？

コンパイル済み CSS:

私は最近 Hammer for Mac を購入しました。

私は静的サイトを作成しており、Bourbon + Neat、Bitters、および Refills を使用してページのスタイルを設定したいと考えています。

私が正しければ、バーボンはすでにハンマーに含まれていますが、ニート、ビターズ、リフィルは含まれていませんか? Hammer for Mac のホームページには、Neat のインストールについて次のように書かれています。

「Hammer で素晴らしい Bourbon Neat フレームワークを使用している場合は、Neat GitHub リポジトリから Neat コードをダウンロードする必要があります。Neat の SCSS ファイルは、app/assets/stylesheets ディレクトリ内にあります。Neat を使用するには、 app/assets/stylesheets の内容をプロジェクト内のフォルダーにコピーするだけです。次に、SCSS または Sass ファイルで @import "neat"; を使用して、Neat を使用します。"...

私がしたこと。ビターズとリフィルを含めるには、同じことを行う必要があると考えました。

次に @import "neat"; を使用してみます。コマンドを main.scss に追加しましたが、ビルドは常に失敗します。

これを機能させる方法について何か考えはありますか？

ありがとう！

私は Bourbon Neat をテストしており、外側のコンテナー内に 2 つの列があり、列の高さを同じにしたい (最も高い列と同じ高さ)。短い列で @include fill-parent を使用しても機能しません。外側のコンテナーと同じ幅になるだけです。私はjavascriptでそれを行うことができましたが、Neatはこれを処理しませんか?

これが私のhtmlです：

そして、これが私のSASSです： `

読んでくれてありがとう。

編集: 今のところ、jQuery を使用して列のサイズを手動で均等化していますが、これについてより適切な方法 (笑) があるかどうか教えてください。

Sassmeister のコードは次のとおりです。リンクに問題がある場合はお知らせください: http://sassmeister.com/gist/0b7c3a1897fe3bbe33db

$tablet と $bigscreen ブレークポイントがあり、最小幅の値を使用しています。

omega(2n) 値を持つ $tablet 画面のメディア クエリがあります。次に、omega(4n) 値を持つ $bigscreen の別のブレークポイントがあります。私の目標は、$bigscreen で行ごとに 3 つの写真を表示し、$tablet で 2 つの写真を表示し、小さな画面で 1 つの写真を表示することです。

コードを調べると、2n タブレットの値がまだ $bigscreen に表示されていることがわかります。これにより、すべてのブロックが収まらず、次の行にぶつかります。これは、新しいブレークポイントによってオーバーライドされるべきではありませんか?

Neat は比較的新しいので、何か提案や役立つヒントがあれば、大歓迎です! ありがとう！

これは私が長い間抱えていた問題であり、小さなことのように思えますが、私の ocd は決して手放すことはありません。

基本的な質問は、HTML コード自体に関するものです。コード行を新しい行に移動することは可能ですが、それでも 1 行にあるかのように読み込まれます。

例えば

の中へ

次のプロジェクトでは、Bourbon を Neat and Bitters と共に使用したいと考えています。3つすべてインストールしましたが、続行する方法がわかりません。

プロジェクト フォルダーで 3 つのフォルダーを個別に使用する必要がありますか?それとも、すべてのインポートを 1 つのメイン ファイルにまとめるために、_bourbon.scss に異なるインポートを追加する必要がありますか?

例えばBourbon(addons内)フォルダとBitters(extend内)フォルダにbutton.scss、clearfix.scss、hide-text.scssがありますが、これらを併用すると競合しませんか?

すべての助けに感謝します:)

私は、sass と bourbon のきちんとしたグリッド フレームワークを使用する非常に基本的な Web サイトを持っています。( http://neat.bourbon.io/examples/ ) サイトと同じ効果を達成しようとしています。幅 800px では、グリッドにブレークポイントがあるように見え、スパン列がドロップされ、幅 100% になります。

以下のコードは、ラッパーと 2 つの 4 および 8 スパン div を出力します。ブラウザーを 300px まで小さくしても、グリッドは維持され、タイトルとコンテンツの div は壊れず、全幅 100% になります。

どうすればこの効果を達成できますか? デフォルトで div を 100% にして、ブレークポイントでスパン列を追加しようとしましたが、これは機能しません。ありがとう。