Susy在最宽的宽度上没有网格填充

Question

我正在使用Susy进行网格布局，并希望容器在宽度低于960px的情况下应用网格填充，但在960px及更高处移除网格填充。我可以将网格填充设置为0然后应用带有断点的填充，但希望能够在其他情况下应用它。我尝试使用Eric Meyer的出血mixin，但它将我的网格发送到左侧。我修改了出血mixin去除填充并使容器居中，但我不确定这是最好的方法。有没有更好的方法来实现这一目标，同时保持其他出血选项可行？

Susy Variables

// --- 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;

Eric's Bleed Mixin：

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

  }
}

在SCSS中应用出血，其中断点是一个独立的mixin，at-max = $ max-site-width

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

Answer 1

在这种情况下，您根本不需要出血混合物。您只想删除/添加网格填充。出血mixin用于将元素推到容器外 - 但如果你想要所有元素出血，你应该摆脱容器上的填充物。这很简单：

.test-grid{
  @include container;
  @include breakpoint(at-max){
    padding: 0;
  }
}