Susy Next Grids

Question

Я просто пытаюсь ознакомиться с новыми опциями Susy Next, и у меня есть свой код:

.grid
   +clearfix
   clear: both

.grid__item
   +gallery(1)
   +rem(margin-bottom, 20px)

Я хочу 5 столбцов сетки внутри .grid чтобы .grid__itemРазмах 1 столбца в галерее формирования.

Если я добавлю +with-layout(5 1/4 fluid show background) внутри .grid тогда я не получаю вывод фона отладки.

Если я добавлю +container(5 1/4 fluid show background) внутри .grid затем я получаю фон, но элементы не соответствуют правильно, поскольку контекст отсутствует.

Есть ли какие-либо документы о том, как использовать +with-layout как я думаю, это может решить эту проблему, но не могу найти ничего на http://susydocs.oddbird.net/en/latest/install

Я просто выбрал лучший способ использовать Susy Next для решения этой проблемы. я нуждаюсь .grid содержать 5 столбов жидкости с 1/4 желоба, а затем позволить мне охватить мой .grid__itemосновано на этом. Мне также нужно иметь возможность выводить фоны отладки на .grid,

Я думаю, что моя главная проблема заключается в том, что я путаюсь между: +container, with-layout и как все складывается вместе. Я прочитал последние документы, но это не совсем щелкнуло в моей голове.

Может быть, только я!

Answer 1

Вам нужно установить свою сетку. with-layout это один из способов сделать это для небольшого блока вложенного кода, но почему бы просто не установить их глобально? Есть несколько способов сделать это, все они задокументированы, но, скорее всего, вы просто хотите layout() Mixin:

// note that it isn't nested under anything.
+layout(5 1/4 fluid show background)

Теперь у вас есть глобальный контекст, и вы можете построить свою сетку:

.grid
  +container

.grid__item
  +gallery(1)

Вот и все. Если вы действительно хотите установить сетку для небольшого фрагмента кода, вы можете использовать with-layout, Это работает так же, как layout, но это влияет только на код, вложенный в него.

// with-layout() for a nested code block:
+with-layout(5 1/4 fluid show background)
  .grid
    +container

  .grid__item
    +gallery(1)