2

Singluritygs と Breakpoints (応答が含まれています) を使用しており、これらのブレークポイントに従ってグローバルなガター幅を変更したいと考えています。

私はこれがうまくいくと思ったが、うまくいかない：

$breakpoints: add-breakpoint('small', 768px);

@include add-grid(12);
@include add-gutter(1);

@include respond-to('small') {
    @include add-gutter(1/2);
}

私はこれに間違った方法でアプローチしていますか?

グリッドの追加は、この手法を使用して機能することに注意してください。

@include respond-to('small') {
    @include grid-span(9, 4);
}
4

1 に答える 1

1

問題と解決策

  1. Singularity は Respond-To と互換性がありません。または、より正確に言えば、Respond-To は Singularity が必要とする機能を提供しません。

  2. レスポンシブガターを定義する正しい方法は、ここで説明されており、次のようになります。

    @include add-gutter(.25 at 900px);.

  3. レスポンシブ グリッドとガターは、モバイル ファーストのグリッドとガターと共に、Sass の上に定義する必要があります。

例：

$bp-small: 768px;

@include add-grid(12);
@include add-gutter(1);
@include add-gutter(1/2 at $bp-small);

.foo {
  @include float-span(1);
  @include breakpoint($bp-small) {
    @include float-span(1);
  }
}

デモ：

http://sassmeister.com/gist/b49bd305f029afe9cd68

更新 1

デビッドポールジュニア

Singlurityはrespond-toと互換性があると思いました.Singlurityを使用して新しいグリッドを正常に追加しています-質問に追加されたメモを参照してください. ドキュメントによると、応答グリッドにはブレークポイントを使用し、ブレークポイントには応答先が含まれています (github.com/Team-Sass/breakpoint/wiki/Respond-To)。

あなたはそれを間違っていました。

Singularity は、さまざまなブレークポイントのグリッド定義のリスト (およびガター定義の別のリスト) を維持します。スパンする場合、Singularity は Breakpoint にコンテキスト (現在のブレークポイント) を尋ね、対応するグリッドとガターの定義をリストから取得します。

Respond-To で使用すると、Singularity はコンテキストを取得できず、モバイル ファースト コンテキストの項目にまたがると見なします。

グリッド/ガター定義リストに各ブレークポイントの定義を入力する代わりに、リスト内のエントリは 1 つだけでした (モバイルの最初のエントリ)。

メディア クエリ内で再適用add-gutter()すると、そのメディア クエリのガター定義を設定していると考えられます。しかし、代わりに、モバイル ファーストのグリッド定義をグローバルに上書きしていました。また、Respond-To が Singularity にコンテキストを報告しないため、メディア クエリ内でモバイル ファーストの定義が使用されていました。

これはそれ自体有効なアプローチです。実際、Singularity 1.0 で積極的に使用しています。ただし、明らかな欠点があります。グリッド/ガターの定義がグローバルにオーバーライドされるという事実により、スパニング ミックスインを使用する前に再適用する必要がadd-grid()ありadd-gutter()ます。そうしないと、Singularity が予期しない定義を使用するという変更があります。 . これは、Sass コードを多数の小さなファイルにまとめている場合に特に当てはまります。

私が書いた 2 つの拡張機能を調査することをお勧めします。

  • ブレークポイント スライサー-- 非常に迅速で効率的なブレークポイントの構文。Respond-To より優れており、Singularity を完全にサポートしています。
  • Singularity Quick Spanner -- Singularity 用の多数のショートカット mixin を備えたツール。そのうちの 1 つは、グリッド/ガター定義を毎回再適用するアプローチを容易にするように設計されています。

更新 2

デビッドポールジュニア

Respond-to メディア クエリ内でグリッドをグローバルに再定義できる場合、ガターを再定義できない理由はまだわかりません。また、「モバイル ファースト」のエントリが 1 つしかないとおっしゃいましたが、そのエントリはモバイル ファースト後の画面サイズ (768px) でした。

@include add-gutter(1/2);メディア クエリ内で実行するかどうかに関係なく、モバイル ファーストのガター定義を上書きすることを理解する必要があります。

上記で、メディアクエリ対応のグリッドとガターを定義する方法を既に説明しました (およびドキュメントへのリンクを提供しました)。繰り返す:

ロルマス

レスポンシブガターを定義する正しい方法は、ここで説明されており、次のようになります。

   `@include add-gutter(.25 at 900px);`.

これは、最初の試みが実際にどのように機能するかです: http://sassmeister.com/gist/c530dfe7c249fad254e9この例とその出力をよく読んでください。

デビッドポールジュニア

アイデアは、メディア クエリがない場合 (モバイルが最初) にはグローバル ガターを使用し、最初のメディア クエリ (768 以降) の場合はグローバル ガターをリセットするというものでした。変数を使用してすべてを設定しました。おそらく、Respond-To について何かが足りないのでしょう。

繰り返しますが、これは有効なアプローチであるとすでに述べました。私の最後の SassMeister リンクは、最初の試行で既に機能していることを証明しています。

そして、Respond-Toはこの状況に適しています: メディア クエリ コンテキストを Singularity に報告しませんが、Singularity にメディア クエリ コンテキストを考慮させていないため、モバイル ファーストの定義のみを使用させています。時間。

必要なコンテキストで実行していることを確認するために、新しい要素にまたがるたびにグリッドとガターを再適用することを忘れないでください.

私のreset-grid()ヘルパーを使用すると、グリッド/ガターの定義を簡単にリセットできます。

于 2014-07-23T09:25:53.537 に答える