説明するのは少し難しいので、できるだけ視覚的に理解できるようにモックアップを作成しました。

http://sassmeister.com/gist/70624a740b1ca4ae7764

(Sass Gist を共有するためのより良い方法があれば、お知らせください。初めて使用します)

基本的に、これは横向きモードのタブレットに必要なレイアウトです。私がやろうとしているのは、さまざまなアスペクト比のさまざまなタブレットに完全に収まるようにすることです. いくつかのことが修正されました。メイン コンテンツ エリアは 16x9 のビデオであるため、その側面はロックされています。

ヘッダーとフッター (メイン カラムのみ) はポートレート モードで使用する必要があるため、現在修正していますが、タブレットのランドスケープに役立つ場合は、通常のフローに組み込むことができます。とにかく、現在はすべて susy2 を介した基本的なレスポンシブであり、サイドバーは完全に分離されているため、メイン コンテンツとは独立してスクロールできます。私が望むのは、ヘッダーとフッターを含むメイン領域全体が vid の上下の余白に完全に収まるようにすることですが、サイドバーの列の幅をタブレットに合わせて変更することです。

つまり... タブレットの幅が広い場合、ティーザーのサムネイルは 16x9 の比率になります。タブレットが狭くなった場合、メインの列は変更されませんが、ティーザー サムは正方形に絞り込まれます。

右側の列のみをレスポンシブに縮小する方法を最初に理解する方が簡単な場合は、親指の側面は変更されませんが、それで問題ありません。縦横比が原因で、あるデバイスと別のデバイスで全体的なレイアウトが台無しになることを望んでいないので、主な焦点は、ヘッダーが上部に、フッターが下部に当たり、メインのビデオがそれらの間に完全に収まるようにすることです。残りは（理由の範囲内で）。

任意の入力の thx。ここでウェブサイトを作成するのは初めてなので、学ぶことがたくさんあります。

ps。右側の列で垂直スクロールを有効にしましたが、実際にはスクロールできないため、(scss 列のスクロール クラスに余分な文字を追加して) 無効にしました。それが実際のコンテンツがないためなのか、それとも空の埋め込みセルをスクロールに値するものとして認識しないためなのかはわかりません。

gulp/gulp-sass が susy を認識できるようにするための支援が必要です。アイデアが不足しており、2 番目の目が必要です。フィードバックありがとうございます。

エラー：

宝石リスト

Config.rb

Gemfile

ゴクゴク

ドキュメントに記載されていない場合は申し訳ありませんが、Response.js またはその他の手法を使用して IE8 ユーザーに Susy2 を使用できます。つまり、デスクトップ ビューのみを強制することができます。ありがとう!

Susy がグリッドの幅を計算する方法がわかりません。12 グリッドの列内にネストされた 9 列のグリッドがあり、期待どおりに幅が計算されません。ここに私の設定があります：

だから私のメインコラムは@include span(last 9 nest);. したがって、その 9 列のグリッド セル内に別のセルを作成すると@include span(1 of 9 inside);、出力 css は次のようになります。

代わりに、私が得ているのは次のとおりです。

私が望むのは、列の合計幅を 60 ピクセルにすることです。これは、1 つの列の幅が期待されるものであり、左右にパディングを追加します。Susy に幅を列幅に追加しないように指示する方法はありますか? また、列を互いに揃える必要があるため、マージンの代わりにパディングを使用しています。

これは、グリッドがどのように見える必要があるかのスクリーンショットです。

1. コンパスは使っていません
2. Breakpoint.scss を使用したい
3. Susy 2.0 を使用しています

この質問に関する投稿がたくさんあることは知っていますが、このトピックに関して何も見つけることができませんBreakpoint.scssでしSusy 2.0た。

使用する必要がありますsusy-breakpointか、またはこのようなことを達成できますか? 800px 以下で 6 列、800px 以上で 12 列が必要です

私は DRY を維持しようとしているので、スタイルに susy-breakpoint を追加しても役に立ちません。

以下のコードも試してみましたが、どこかにエラーがあり、機能していないと思います。

大企業のプロジェクトでsusyを使いたいです。彼らは、susy がどのライセンスの下にあるかを知りたがっています。情報を教えていただけますか？githubリポジトリをチェックしても、ウェブページを見ても、その質問に対する答えを見つけることができませんでした。

いくつかの例では、グローバル変数に応じて要素の幅が変化するスコープを定義するのは非常に簡単でした。Susy 2 を学習しようとしていますが、ブレークポイント統合でどのように機能するかを実際に理解することはできません。

アーカイブしたいものを指摘するために、ここにいくつかの疑似コードを作成しました

Susy SASS マップ

HTML要素

.foo に求める結果

• 小さい = 50% (ガターを除く)
• 中 = 33,3333% (ガターを除く)
• 大= 50％（ガターを差し引いたもの）

これをどのようにアーカイブしますか？いくつかのチュートリアルを見てきましたが、これについては触れていません。この質問は、似たようなことについて話します。Susy にどのレイアウトを使用するかを常に伝えなければならないのでしょうか? もちろん言うこともできますが、グリッドをグローバルに定義し、すべての時間x **of** somethingをスキップするのは非常に便利であることがわかりました。