1

Susy ドキュメントから: http://susy.oddbird.net/guides/reference/#ref-grid-background

SUSY GRID
Background Susy Grid をコンテナの背景画像として表示します。

// susy-grid-background(); .page { @include susy-grid-background; }

要素をコンテナとして使用している場合、このグリッド背景のサイズを適切に設定するには、背景を要素に適用する必要があります。

私のcssのスニペット:

$total-cols     : 16;
$column-width   : 4em;
$gutter-width   : 1em;
$grid-padding   : $gutter-width;

html { background: #fff no-repeat left top; }    

.standard {
  @include container; 
  @include susy-grid-background; /* Susy */

そして私のHamlで：

%body.standard

何を試しても、グリッドには常に 12 列が表示されます。このデバッグ ツールを動作させるために必要な方向を教えてくれる人はいますか?

susy (1.0.rc.1) コンパス (0.13α.0)

4

2 に答える 2

5

いくつかのブレークポイントがある場合は、表示される列の数を変更するために、これらに直接対処する必要もあります$susy-grid-background。

.page {
  @include container ($total-columns, $break1, $break2);

  @include susy-grid-background;

  @include at-breakpoint($break1)  {
    @include susy-grid-background;
  }
  @include at-breakpoint($break2)  {
    @include susy-grid-background;    
  }
}
于 2012-11-23T02:39:07.173 に答える
2

$total-colsと呼ばれるべき$total-columnsです。その変数の名前は 1.0 で変更されました。デフォルト設定は 12 列であり、実際にはそれをどこでもオーバーライドしていません。

于 2012-05-24T07:54:20.223 に答える