css - Susy : How to extend content box to cover grid-padding as well?

我刚开始和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;
}

最佳答案

您有两个不错的选择。一个是您所拥有的简化版本。由于默认情况下块元素的宽度为100％，因此您可以简单地消除宽度设置(以及所有难以理解的数学运算)。

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

您的另一个选择是在页面上使用多个容器。这就需要更改标记，但是有时候这是一种很好的简化方法。如果将 header 移到当前容器之外，然后将其声明为自己的容器，则可以完成此操作。

(作为旁注:如果您确实需要全宽，则可以简单地使用columns-width()函数(用于内部宽度，不带填充)或container-outer-width()用于全宽度(包括填充)。)

更新:

我一直在使用此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;
    }
  }
}

一些例子:

#header { @include bleed; }
#nav { @include bleed($sides: left); }
#main { @include bleed($sides: right); }
#footer { @include bleed(space(3)); }

关于css - Susy : How to extend content box to cover grid-padding as well?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11223927/