Susy 2：附近排水沟的背景颜色

Question

好的，首先我试图向Sassmeister展示这个问题，但它是如此......编译速度慢，我放弃了。我使用Susy，SCSS和Haml。

所以这是我认为相关的图像。我想让顶部的黑色条纹（背景颜色）触摸侧面的黑色侧边栏。换句话说 - 为排水沟添加背景颜色。

这是我的代码：

HTML：

<div class="page">
  <div class="nav">
    <div class="brand">
      <a class="name" href="/">Tomasz Gałkowski</a>
    </div>
    <div class="work">
      <a class="projects" href="#">projects</a>
      <a class="timeline" href="#">timeline</a>
    </div>
    <div class="blog">
      <a class="articles" href="#">articles</a>
      <a class="about" href="#">about me</a>
      <a class="contact" href="#">contact</a>
    </div>
  </div>
  <div class="content">
    <div class="header">
      <h1>Tomasz Gałkowski</h1>
      <h2>web developer</h2>
    </div>
    <div class="main">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="footer">
      <small>Tomasz Gałkowski, 2016</small>
      <p>gitlab, facebook, twitter</p>
    </div>
  </div>
</div>

和（相关）SCSS：

$susy: (
  columns: 12,
  gutters: 1/2,
  debug: (image: show)
);

.page {
  @include container;
  @include clearfix; // from compass
}

.nav {
  @include span (3 of 12);
  background: $background-dark;
  height: 100vh;
}

.content {
  @include span(last 9 of 12);
  background: $white;

  .header {
    background: $background-dark;
  }
}

我正在尝试使用bleed()或gutters()的某些内容，但它只是按照我希望的方式工作。我刚刚开始学习Susy，虽然我浏览了整个文档，但我还是无法理解这个概念。 ：）

Answer 1

Susy并不真正考虑你想要的排水沟颜色，因为它们是网格元素之间的填充或边距。

nav和.content元素之间的装订线只是元素之间的边界。

如上图所示，在深黄色和粉红色元素之间，只有一个边缘。

如果您将背景添加到容器包装中，您可以将[{1}}作为背景添加到容器包装器中，$background-dark（您在列之间看到的元素） - 插图中的绿色元素。然后将白色背景放在你想要的蓝色元素上（.page和.main），你就会在那里。

根据.footer下面的空格，您可能需要稍微延长它的高度，因为.footer将会可见。

如果您真的没有在.page上添加背景，则可以使用.page的伪元素&:before来覆盖列之间的装订线。如果感觉像补丁工作，我不会推荐它。

Answer 2

尽管miphe的答案更深入，但我还是决定添加这个，以便更具体案例。经过一番研究后，我认为我试图实现的是一种反模式。

我做了什么来获得我想要得到的结果：我在侧边栏上设置了固定宽度，并使用.content作为@include container;而不是.page并将.content移至通过设置padding-left: $sidebar-width来确定$sidebar-width是固定值。