6

Susyと遊び始めたところです。グリッドパディングがある12列のグリッドがあります。ここで、ページのヘッダーがグリッドパディングを含むグリッド全体にまたがるようにします。私が今行っているのは、全体の幅を計算してから、ヘッダーに負のマージンを設定することです。それは私にはかなりハックな気がします...それを行うためのよりクリーンな方法はありますか?

$total-columns  : 12;
$column-width   : 3.5em;
$gutter-width   : 1.25em;
$grid-padding   : 2em;

$total-width: ( $total-columns * ($column-width + $gutter-width) ) + ( 2 * $grid-padding ) - $gutter-width;

header {
    height: 150px;
    width: $total-width;
    margin-left: -$grid-padding;
}
4

1 に答える 1

13

2 つの良い選択肢があります。1 つは、あなたが持っているものの簡略化されたバージョンです。ブロック要素はデフォルトで幅が 100% であるため、幅の設定 (およびすべてのハッキーな計算) を単純に削除できます。

header {
    height: 150px;
    margin: 0 0 - $grid-padding;
}

もう 1 つのオプションは、ページで複数のコンテナーを使用することです。そのためにはマークアップを変更する必要がありますが、単純化した方がうまくいく場合もあります。ヘッダーを現在のコンテナーの外に移動し、それを独自のコンテナーとして宣言すると、うまくいきます。

（補足：全幅が必要な場合は、columns-width()関数（パディングなしの内側の幅）またはパディングcontainer-outer-width()を含む全幅の関数を使用できます。）

アップデート：

私はこのミックスインを使用して、必要な場所に裁ち落としを適用しています:

@mixin bleed($padding: $grid-padding, $sides: left right) {
  @if $sides == 'all' {
    margin: - $padding;
    padding: $padding;
  } @else {
    @each $side in $sides {
      margin-#{$side}: - $padding;
      padding-#{$side}: $padding;
    }
  }
}

いくつかの例：

#header { @include bleed; }
#nav { @include bleed($sides: left); }
#main { @include bleed($sides: right); }
#footer { @include bleed(space(3)); }
于 2012-07-04T01:03:05.923 に答える