Сюзи: как расширить поле содержимого, чтобы оно также покрывало сетку?

Я только начал играть с Сюзи. У меня есть сетка из 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;
}
1 6
css compass-sass

1 ответ:

У вас есть два хороших варианта. Один-это упрощенная версия того, что у вас есть. Поскольку элементы блока по умолчанию имеют 100% ширину, вы можете просто исключить настройку ширины (и всю эту избитую математику).

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

Другой вариант-использовать несколько контейнеров на странице. Это требует изменения разметки, но иногда это упрощение, которое хорошо работает. Если вы переместите заголовок за пределы текущего контейнера и объявите его как свой собственный контейнер, это сделает следующее: уловка.

(в качестве примечания: если вам когда-либо понадобится полная ширина, вы можете просто использовать функцию columns-width() (для внутренней ширины, без заполнения) или container-outer-width() для полной ширины, включая заполнение.)

Обновление:

Я использую этот миксин, чтобы применить кровотечение везде, где мне это нужно: 

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