Susy: Nasıl grid-padding kapsayacak şekilde içerik kutusu uzatmak için?

Question

Sadece Susy ile oynamaya başladım. Üzerinde ızgara dolgu bulunan 12 sütun ızgaram var. Şimdi sayfamın üstbilgisinin ızgara dolgu dahil tüm ızgarayı kapsamasını istiyorum. Şu anda yaptığım şey genel genişliğin hesaplanması ve daha sonra başlıkta bir negatif marjın ayarlanmasıdır. Bu benim için oldukça berbat hissettiriyor ... Bunu yapmanın daha temiz bir yolu var mı?

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

Answer 1

İki iyi seçeneğiniz vardır. Biri sahip olduklarınızın basitleştirilmiş bir versiyonudur. Blok öğeleri varsayılan olarak% 100 genişlik olduğundan, genişlik ayarınızı (ve tüm bu zorlu matematik) kolayca ortadan kaldırabilirsiniz.

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

Diğer seçenek sayfasında birden fazla konteyner kullanmaktır. Bu, biçimlendirmede bir değişiklik gerektirir, ancak bazen iyi çalışan bir basitleştirme. Başlığı geçerli kapsayıcınızın dışına taşırsanız ve bunu kendi kapsayıcısı olarak ilan ederseniz, bu hile yapar.

(Bir yan not olarak:. Dolgu dahil olmak üzere tam genişliği için hiç tam genişliği ihtiyacınız varsa, sadece dolgu hariç, iç genişlik için columns-width() fonksiyonunu (kullanabilirsiniz) veya container-outer-width())

GÜNCELLEME:

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

Bazı örnekler::

Bu mixin kullanıyorum

, ihtiyacım yerde kanar uygulamak

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