Susy：如何擴展內容框以覆蓋網格填充？

我剛開始和Susy一起玩。我有一個12格網格，它有網格填充。現在我想讓頁面的標題跨越整個網格，包括網格填充。我現在正在做的是計算總寬度，然後在標題上設置負邊距。對我來說，這感覺相當不好...有沒有更乾淨的方法來做到這一點？Susy：如何擴展內容框以覆蓋網格填充？

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

來源

2012-06-27 Klaus Klausen

你有兩個不錯的選擇。一個是你擁有的簡化版本。由於塊元素默認爲100％寬度，因此可以簡單地消除寬度設置（以及所有這些哈希數學）。

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

您的其他選擇是在頁面上使用多個容器。這需要對標記進行更改，但有時這是一種簡化，運行良好。如果將標題移動到當前容器外部，並將其聲明爲它自己的容器，那麼這將會起到訣竅的作用。

（作爲一個方面說明：如果你需要不斷的全寬，你可以簡單地使用columns-width()功能（內寬，沒有填充）或container-outer-width()爲全寬，包括填充）

UPDATE：

我一直在使用這種混合料攪拌，申請流血的任何地方，我需要它：

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

來源

2012-07-04 01:03:05

感謝您的回答。所以基本上我做了正確的事情，因爲container-outer-width（）與我做的計算幾乎相同。我在整個頁面中有幾個元素需要全寬，所以容器解決方案在這裏沒有選擇，但是如果適用的話我會猜測它是最乾淨的。雖然留下了寬度，但留下了容器空白的正確填充。 –

負右邊距應該可以處理正確的填充。 'container-outer-width'的問題是它不是基於百分比的，而你的網格的其餘部分是。我會避免在Susy網格中設置固定寬度。 –

@EricMeyer我試着用它來讓我的網格元素左右流血，但它只是將整個容器左移。我使用了 '＃top-content {0} {0} {0} #include span-columns（24,24）; \t @include border-radius（$ radius）; \t @include bleed; \t background-color：#fff; \t margin-top：10px; \t height：300px; }' 它將箱子左移。 – Steve

Susy：如何擴展內容框以覆蓋網格填充？

回答

相關問題