0

さまざまなブレークポイントでさまざまなレイアウトを持つプロジェクトがあり、マップ部分を機能させるのに少し苦労しています。http://sassmeister.com/gist/ef02247af9f901fb3897で例を設定しました

2 つのマップがあり、それぞれに異なるグリッド設定とデバッグ色があることがわかります。しかし、いくつかの問題があります。

  1. グリッドの色は変更されていません。それらは最初のマップでも表示されません (より広いグリッドでは黄色になり、次に赤色になるはずです)。
  2. グリッド列は変更されますが、列幅またはガター幅が正しいとは思いません。例として、列 ONE はグリッドの 5 番目の列よりも大きく見えますが、それは少し短くする必要があり、余白も広くないようです。これは、グリッドの背景が十分に正確ではないということでしょうか?
  3. 975 ブレークポイントに到達すると、ガターはタブレット マップで定義されたものよりも大きくなるはずですが、そうではないようです。

さまざまなブレークポイントで正しいマップを実行するために何が必要かについてのアイデア。さまざまなブレークポイントでマップをクリア/リセットする必要がありますか?

ありがとう

4

1 に答える 1

1

グリッド画像の色で何が起こっているのかわかりません。それはバグのようです。GitHub で問題を報告できますか?

他の 2 つの問題は、グリッド設定の適用方法に関連しています。Susy に関する限り、グリッドはコンテナ (明示的に渡す場所) にのみ使用されています。Susy は DOM や要素のネストについて何も知らないため、これらのグリッド設定は実際には子に「渡されません」。

spanどのグリッド設定を使用するかをミックスインに伝える方法はいくつかあります。たとえば、明示的に渡す@include span(last 7 of $tablet);か、mixin を使用してwith-layoutグループ全体をラップすることができます。

  @include breakpoint(760px) {
    @include with-layout($tablet) {
      @include container;
      .column1 {
        @include span(5);
      }
      .column2 {
        @include span(last 7);
      }
    }
  }

susy-breakpointまたは、まさにそのためのショートカットである を使用できます。

  @include susy-breakpoint(760px, $tablet) {
    @include container;
    .column1 {
      @include span(5);
    }
    .column2 {
      @include span(last 7);
    }
  }

Susy は、これらの例で設定さwith-layoutれているデフォルトのグローバル コンテキストを想定するため、コンテナーやスパンにコンテキストを追加しません。susy-breakpoint

于 2014-10-15T21:41:26.117 に答える