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

Я пытаюсь создать простой вложенный макет с помощью 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);
  }
}

susy-sass
person aaandre    schedule 01.08.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

@include span(first 6 of 12 nest);

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

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

person Miriam Suzanne    schedule 03.08.2014
comment
Спасибо, Эрик. Правильно ли я понимаю, что добавление вложенных создает желоба с постоянным размером, учитывая, что я использую правильный контекст для дочерних/внучатых элементов? - person aaandre; 06.08.2014
comment
Вы говорите о ключевом слове nest, которое я упомянул, или о миксине nested, который мы также предоставляем? Я не уверен, что понимаю вопрос. Если вы правильно используете контекст, желоба должны оставаться согласованными даже во вложенных местах. Ключевое слово nest гарантирует, что вы не будете дублировать края, а миксин nested поможет вам управлять контекстом для больших блоков. - person Miriam Suzanne; 06.08.2014
comment
Я имел в виду вложенное ключевое слово, и вы ответили на мой вопрос. Спасибо! - person aaandre; 06.08.2014
comment
Use the nest keyword to tell Susy that a span has children - А почему бы спену не иметь детей? Я все еще скучаю по точке гнезда - person vsync; 07.05.2015
comment
nest удаляет inside или split промежутков в родительском элементе, поэтому эти промежутки не дублируются дочерним элементом. Важно только в том случае, если дочерние элементы также размещаются на сетке с помощью susy. - person Miriam Suzanne; 08.05.2015
comment
@EricMSuzanne Если я правильно понимаю, ключевое слово nest всегда удаляет желоба с обеих сторон. Но предположим, что вы используете разделенные желоба и применяете @include span(first 6 of 12 nest); к элементу, разве не имеет смысла, если элемент получает половину желоба с правой стороны? - person marcvangend; 28.09.2015
comment
С раздельными желобами мы вообще не беспокоимся о first и last — в этом все преимущество. Если мы всегда применяем желоба вместе, на самом глубоком уровне вложенности, это намного проще. - person Miriam Suzanne; 04.10.2015