Proper padding for nested elements with Susy 2

Question

I am trying to build a simple nested layout with Susy 2: A container with two columns (children), with each child column containing copy and two nested columns (grandchildren).

I am noticing that the grandchildren columns have their own gutters and thus their content does not align with the gutters of their parent.

Ideally, the grandchildren (and their background colors) would extend to the full-width of the child element.

What is the best approach to achieve this?

gist: https://gist.github.com/andreimoment/2a734aa4a0e99b2866e9

HTML:

<div class="parent">
  <div class="child">
    <p>child 1</p>
    <div class="grandchild">Grandchild 1</div>
    <div class="grandchild last">Grandchild 2</div>
  </div>  
  <div class="child last">child 2</div>  
</div>

SCSS:

@import "compass";
@import "susy";

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

$susy: (
  columns: 12,
  column-width: 4em,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position:inside,
  global-box-sizing: border-box,
  debug: (
    image: show,
    color: rgba(200,100,100,.3),
    output: overlay,
    toggle: top right,
  ),
);

.parent {
  @include container();
  @include show-grid(background);
  padding:0;
  @include clearfix;
  }

.child {
  background-color: rgba(100,100,200, 0.5);
  @include span(first 6 of 12);
  &.last {
    @include span(last 6 of 12);
  }
}

.grandchild {
  background-color: rgba(100,100,200, 0.5);
  @include span(first 3 of 6);
  &.last {
    @include span(last 3 of 6);
  }
}

Answer 1

Use the nest keyword to tell Susy that a span has children. This is only needed with inside and split gutters — which you are using.

@include span(first 6 of 12 nest);

You can also use no-gutters any time you want Susy to not output gutters — but nest is the more semantically clear in this case.

NOTE: you also don't need to use first with inside or split gutters. You don't need last either, but it can help with some sub-pixel rounding issues. Those aren't hurting anything, but you can drop them without causing damage.