Richtige Polsterung für verschachtelte Elemente mit Susy 2

Question

Ich versuche mit Susy 2 ein einfaches verschachteltes Layout zu erstellen:Ein Container mit zwei Spalten (untergeordneten Spalten), wobei jede untergeordnete Spalte eine Kopie und zwei verschachtelte Spalten (enkeluntergeordnete Spalten) enthält.

Mir ist aufgefallen, dass die Enkelspalten eigene Zwischenräume haben und ihr Inhalt daher nicht mit den Zwischenräumen ihrer übergeordneten Spalten übereinstimmt.

Im Idealfall würden sich die Enkel (und ihre Hintergrundfarben) über die volle Breite des untergeordneten Elements erstrecken.

Was ist der beste Ansatz, um dies zu erreichen?

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

Benutzen Sie die nest Schlüsselwort, um Susy mitzuteilen, dass eine Spanne Kinder hat.Dies wird nur mit benötigt inside Und split Dachrinnen – die Sie verwenden.

@include span(first 6 of 12 nest);

Sie können auch verwenden no-gutters Wenn Sie möchten, dass Susy keine Dachrinnen ausgibt – aber nest ist in diesem Fall semantisch klarer.

NOTIZ:Sie müssen es auch nicht verwenden first mit inside oder split Dachrinnen.Das tust du nicht brauchen last beides, aber es kann bei einigen Problemen mit der Subpixelrundung hilfreich sein.Diese schaden nicht, aber man kann sie fallen lassen, ohne Schaden zu nehmen.