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

【问题标题】：Susy 2: background color on a nearby gutterSusy 2：附近排水沟的背景颜色
【发布时间】：2016-01-26 17:18:53
【问题描述】：

好的，首先我试图展示 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，虽然我浏览了整个文档，但我并不能真正掌握这个概念。 :)

【问题讨论】：

标签： css sass susy

【解决方案1】：

Susy 并没有真正考虑您想要的装订线颜色，因为它们是网格元素之间的填充或边距。

nav 和 .content 元素之间的间距只是元素之间的边距。

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

如果您将背景添加到容器包装器中，您可以将$background-dark 作为您描述的形状的背景，即.page（这是您在列之间看到的元素） - 插图中的绿色元素。然后将白色背景放在你想要的蓝色元素上（.main 和.footer），你几乎就在那里了。

根据您对.footer 下方空间的需求，您可能需要稍微扩展它的高度，因为.page 将可见。

如果您真的不想在.page 上放置背景，您可以使用.content 的伪元素&:before 来覆盖列之间的装订线。如果感觉像是拼凑而成，我不会推荐它。

【讨论】：

经过一番研究，我得出了同样的结论：我想做的是一个反模式。

【解决方案2】：

尽管 miphe 的回答更深入，但我还是决定添加这个答案以更加具体化。经过一番研究，我决定我想要实现的是一种反模式。

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

【讨论】：