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 元素之间的间距只是元素之间的空白。

如上图所示，在 dark-yellow 和 pink-ish 元素之间，只有一个边距。

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

根据您对 .footer 下面的 space 的追求，您可能需要稍微延长它的高度，因为 .page 将可见。

如果您真的不想在 .page 上放置背景，您可以使用 .content 的伪元素 &:before 来覆盖列之间的间距。如果感觉像 patch-work 我不会推荐它。

Answer 2

尽管 miphe 的回答更多 in-depth，但我还是决定添加这个回答更多 case-specific。经过一些研究，我决定我想要实现的是 anti-pattern.

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

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

Susy 2: background color on a nearby gutter

css

sass

susy