Susy:如何扩展内容框以覆盖网格填充? [英] Susy: How to extend content box to cover grid-padding as well?
问题描述
我刚开始玩苏珊。我有一个12列网格上有网格填充。现在我想要我的页面的标题跨越整个网格包括网格填充。我现在做的是计算总宽度,然后在标题上设置负边距。这对我来说感觉挺讨厌的。有没有更干净的方法来做呢?
I just started to play with Susy. I have a 12 column grid that has grid-padding on it. Now i want the header of my page to span the whole grid including the grid-padding. What I'm doing right now is calculating the overall width and then setting a negative margin on the header. That's feels rather hacky to me... Is there a cleaner way to do it?
$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%宽度,所以你可以简单地消除你的宽度设置(和所有那些复杂的数学)。
You have two good options. One is a simplified version of what you have. Since block elements are 100% width by default, you can simply eliminate your width setting (and all that hacky math).
header {
height: 150px;
margin: 0 0 - $grid-padding;
}
您的其他选项是在页面上使用多个容器。这需要改变标记,但有时它是一个简化,工作很好。如果将标题移到当前容器之外,并将其声明为自己的容器,那么这将会执行。
Your other option is to use multiple containers on the page. That requires a change to the markup, but sometimes it's a simplification that works well. If you move the header outside your current container, and declare it as a container of it's own, that will do the trick.
(注意:需要全宽,你可以简单地使用 columns-width()
函数(内部宽度,无填充)或 container-outer-width ()
。)
(as a side note: if you do need the full width ever, you can simply use the columns-width()
function (for inner width, without padding) or container-outer-width()
for the full width including the padding.)
UPDATE:
我一直在使用这个mixin,在任何需要的地方应用出血:
I've been using this mixin, to apply bleed anywhere I need it:
@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;
}
}
}
>
Some examples:
#header { @include bleed; }
#nav { @include bleed($sides: left); }
#main { @include bleed($sides: right); }
#footer { @include bleed(space(3)); }
这篇关于Susy:如何扩展内容框以覆盖网格填充?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!