sass - 让背景扩展到容器之外的技巧是什么？

Question

我有一个主要内容 div，嵌套了一个内容和侧边栏 div。我的内容部分是背景色，我想一直走到屏幕的左侧，但停在我设置它的列明智的位置，即 8。

<div id="main-content">
  <div class="container">
    <div id="content">
    </div>
    <div id="sidebar">
    </div>
  </div>
</div>

#content { 
  @include span-columns(8, 12);
  background-color: rgba(0, 0, 0, .5);
}

#sidebar { @include span-columns(4 omega, 12); }

我尝试了 bleed mixin，给了它 10000px 之类的东西，但这把我所有的内容都弄乱了。我能做些什么来实现我的目标？谢谢！

Answer 1

我懂了。我可以想出几种方法来做到这一点，但它们都需要一点创造力。旧的（原始的）Susy 网站实际上使用出血方法创建了这种效果。这将像这样工作：

.container { @include container; }

#content {
  @include span-columns(8, 12);
  @include bleed(200%, left);
  background-color: rgba(0, 0, 0, .5);
}

#sidebar { @include span-columns(4 omega, 12); }

你发现这种方法有什么问题？