Правильное заполнение для вложенных элементов с помощью Susy 2

Question

Я пытаюсь создать простой вложенный макет с помощью Susy 2:Контейнер с двумя столбцами (дочерними), каждый из которых содержит копию и два вложенных столбца (внучатые).

Я заметил, что столбцы-внучки имеют свои собственные поля, и поэтому их содержимое не совпадает с полями их родительского элемента.

В идеале внуки (и их цвета фона) должны занимать всю ширину дочернего элемента.

Каков наилучший подход для достижения этой цели?

суть: 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>

СССС:

@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

Использовать nest ключевое слово, чтобы сообщить Сюзи, что у диапазона есть дочерние элементы.Это нужно только с inside и split желоба — которые вы используете.

@include span(first 6 of 12 nest);

Вы также можете использовать no-gutters в любой момент, когда вы захотите, чтобы Susy не выводила желоба, но nest в данном случае является более семантически ясным.

ПРИМЕЧАНИЕ:вам также не нужно использовать first с inside или split желоба.Вы не нуждаться last либо, но это может помочь с некоторыми проблемами субпиксельного округления.Они ничему не повредят, но вы можете уронить их, не причинив вреда.