Relleno adecuado para elementos anidados con Susy 2

Question

Estoy intentando crear un diseño anidado simple con Susy 2:Un contenedor con dos columnas (hijos), cada columna secundaria contiene una copia y dos columnas anidadas (nietos).

Me doy cuenta de que las columnas de los nietos tienen sus propios márgenes y, por lo tanto, su contenido no se alinea con los márgenes de sus columnas principales.

Idealmente, los nietos (y sus colores de fondo) se extenderían a todo el ancho del elemento hijo.

¿Cuál es el mejor enfoque para lograr esto?

esencia: 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

Utilizar el nest palabra clave para decirle a Susy que un lapso tiene hijos.Esto sólo es necesario con inside y split canalones, que estás usando.

@include span(first 6 of 12 nest);

También puedes usar no-gutters cada vez que quieras que Susy no genere canales, pero nest es lo más semánticamente claro en este caso.

NOTA:tampoco es necesario utilizar first con inside o split canalones.tu no necesidad last tampoco, pero puede ayudar con algunos problemas de redondeo de subpíxeles.Estos no dañan nada, pero puedes dejarlos caer sin causar daño.