我刚开始和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％宽度,因此您可以简单地消除宽度设置(以及所有那些hacky数学).
header {
height: 150px;
margin: 0 0 - $grid-padding;
}
您的另一个选择是在页面上使用多个容器.这需要更改标记,但有时这是一个很好的简化.如果你将标题移到当前容器之外,并将其声明为它自己的容器,那就可以了.
(作为旁注：如果你确实需要全宽度,你可以简单地使用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)); }
