0

div がグリッドと一致しません。これは 8 つのコンテナー グリッドであり、要素に span(2) を指示すると、グリッドが 4 であるかのように動作します。これは、$susy でグローバル グリッドを定義していないためですか?

いくつかのコンテキスト コード:

まず、コンテナ グリッドを定義しました。

 #grid{
        @include container(8);
        gutter-width: 5%;
       }

次に、それをhtmlに追加しました：

<main id="grid">...</div>

次に、css で div をネストしました。

#object1{
    @extend %object;
    @include span(2);
    }

そしてそれをhtmlに追加しました

<main id="grid">
   <div id="object1">a</div>
</main>

編集：修正済み（子要素でもコンテキストを定義する必要があります。なぜですか？必要なグリッド量に応じてスパンを設定できる場合、このwith-layoutとコンテキストに続くhokey pokeyのポイントは何ですか？親要素からコンテキストを読み取るのでは、susy のポイントは何ですか?)

これが結果です

4

1 に答える 1

1

グローバルに設定する場合、すべてのコンテナ/スパン要素に明示的なコンテキストを渡す必要はありません。Susy (およびその他の Sass プラグイン) は DOM を認識しないため、が に設定されている#object1内部にあることを認識しません。#grid8 columns

すべてのアイテムには、どこかからのコンテキストが必要です。明示的に渡さない場合、Susy はグローバル設定をチェックします。デフォルトは4 columnsです。グローバル設定を に変更すると8、コンテキストをミックスインに渡す必要がなくなります。mixin は、with-layoutネストされたコードのブロックに対してグローバル設定を一時的に変更する 1 つの方法にすぎません。

.default {
  @include span(2); // uses global default of 4
}

$susy: layout(8);

.custom {
  @include span(2); // uses global setting of 8

  @include with-layout(4) {
    @include span(2); // uses temporary setting of 4
  }

  @include span(2); // uses global setting of 8 again
}
于 2015-05-28T07:07:53.640 に答える