グリッドレイアウトに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);
}
}