0

グリッドレイアウトにSusyを使用しており、コンテナで960px未満の幅でグリッドパディングを適用したいのですが、960px以上でグリッドパディングを削除します。グリッドパディングを0に設定してから、ブレークポイントを使用してパディングを適用することもできますが、他の状況でも適用できるようにしたいと考えています。Eric Meyerのブリードミックスインを使用してみましたが、グリッドが左側に送信されます。ブリードミックスインを変更して、パディングを削除し、コンテナを中央に配置しましたが、これが最善の方法かどうかはわかりません。他のブリードオプションを実行可能に保ちながら、これを達成するためのより良い方法はありますか？

スージー変数

// --- Layout --- 
$max-site-width: 960px; // sets the max width

// --- Susy Grid System ---
$container-style: magic;
$container-width: $max-site-width;
$total-columns: 12;
$column-width: 4em;
$gutter-width: 2em;
$grid-padding: 1em;

エリックのブリードミックスイン：

@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;
    }
  }
}

$ orientで変更して、パディングなしでコンテナを中央に配置します

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

  }
}

ブレークポイントがat-max=$max-site-widthのスタンドアロンミックスインであるSCSSでブリードを適用します

.test-grid{
    @include container;
    @include breakpoint(at-max){
        @include bleed($orient: center);
    }
}
4

1 に答える 1

0

この場合、ブリードミックスインはまったく必要ありません。グリッドパディングを削除/追加したいだけです。ブリードミックスインは、要素をコンテナの外にプッシュするためのものですが、すべての要素をブリードさせたい場合は、コンテナのパディングを削除する必要があります。簡単だ：

.test-grid{
  @include container;
  @include breakpoint(at-max){
    padding: 0;
  }
}
于 2013-02-06T20:47:35.287 に答える