0

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

苏西变量

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

  }
}

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

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

1 回答 1

0

在这种情况下，您根本不想要 bleed mixin。您只想删除/添加网格填充。bleed mixin 用于将元素推到它们的容器之外——但如果你想让所有元素都流血，你应该去掉容器上的填充。这很容易：

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