Susy 2: background color on a nearby gutter

Question

OK, first of all I tried to show the issue with Sassmeister, but it's so f... slow to compile that I just gave up. I use Susy, SCSS and Haml.

So here is the image that I think is relevant. I want to make the black bar at the top (background-color) to touch the black sidebar at the side. In other words - to add background color to gutter.

Here's my code:

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>

And (relevant) 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;
  }
}

I was trying some stuff with bleed() or gutters() but it just didn't work the way I wanted it to work. I'm just starting to learn Susy and though I crawled through the whole documentation I wasn't really able to grasp this concept. :)

score 1 · Accepted Answer · answered Jan 27 '16 at 13:30

Susy doesn't really consider colors you'd want for gutters, as they are paddings or margins between grid elements.

The gutter between the nav and .content elements is just a margin between elements.

As the picture above illustrates, between the dark-yellow and the pink-ish elements, there is just a margin.

You can achieve having $background-dark as a background in the shape you described if you add the background to the container wrapper, being .page (that's the element you see between your columns) - the green element on the illustration. By then putting white background on the blue elements you want (.main and .footer), you'll pretty much be there.

Depending on what you're after with the space beneath .footer you may need to extend it's height somewhat, since .page will be visible.

If you're really set on not putting a background on .page, you could use the pseudo element &:before of .content to overlay the gutter between your columns. If feels like patch-work and I wouldn't recommend it.

After some researching I came to the same conclusion: what I wanted to do was an anti-pattern. — Tomasz Gałkowski, Jan 27 '16 at 20:18

score 0 · Answer 2 · answered Jan 27 '16 at 20:20

Even though miphe's answer goes more in-depth I decided to add this one as well to be more case-specific. After some research I decided that what I was trying to achieve is an anti-pattern.

What I did to get the result I wanted to get: I set fixed width on the sidebar and used .content as @include container; instead of .page and moved .content to the right by setting padding-left: $sidebar-width where $sidebar-width is the fixed value.

Susy 2: background color on a nearby gutter

2 Answers2