Использование Susy Далее Как создать сетку с жидкими столбцами и фиксированными желобами

Как настроить сетку с плавными столбцами и фиксированными промежутками с помощью Susy Next?

Похоже, что Gutter Position — это то, что нужно, предлагая две настройки, которые используют отступы для желобов См. Документы:

inside
Промежутки добавляются в качестве отступов с обеих сторон элемента макета и не удаляются по краям сетки.

inside-static
Промежутки добавляются как статические отступы с обеих сторон элемента макета, даже в контексте гибкого макета, и не удаляются по краям сетки.

Тем не менее, я не имел никакого успеха в его использовании. Насколько я вижу, в Документах нет упоминания о том, как его следует использовать, поэтому казалось логичным, что сработает следующее:

$default-layout: (
  global-box-sizing: border-box,
  columns: 12,
  container: rem-calc(1000),
  gutter-position: inside-static, // Same with `static`
  gutters: rem-calc(20)
);

Однако это вызывает ошибку, как только используется @include span():

Invalid null operation: "12 times null".

Я попытался добавить явную ширину столбца:

  column-width: 8.333333333%,

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

По сути, мне нужен эквивалент этого (но с 12 столбцами):

.wrapper
{
  width:100%;
  float:left;
}

.column
{
  width: 25%;
  float: left;
  padding: 20px;
  box-sizing: border-box;
}

Codepen здесь

Примечание. Мне известен этот вопрос, но он ссылки Сузи 1.


sass grid susy-compass
person Undistraction    schedule 23.07.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я нашел полезный выпуск на Github Susy со ссылкой на Sassmeister, содержащий пример того, что мне нужно.

Для меня работает следующее:

$gutter-width: rem-calc(10);
$pointless-column-width: rem-calc(1);

// Default layout
$default-layout: (
  global-box-sizing: border-box,
  columns: 12,
  container: rem-calc(1000),
  gutter-position: inside-static,
  column-width: $pointless-column-width,
  gutters: $gutter-width/$pointless-column-width
);

$susy: $default-layout;

Я не понимаю, почему нужно устанавливать ширину столбца, и ее фактическое значение, похоже, вообще не влияет (если оно не равно нулю или нулю). Он просто должен присутствовать.

Подробнее об этой проблеме Github, которую я поднял, включая Зассмейстер.

person Undistraction    schedule 23.07.2014
comment
Значение на самом деле имеет эффект, если присмотреться — вы только что записали переменные таким образом, что эффект от вас скрыт. column-width — это базовая единица математики, которую использует Susy, а параметр gutters всегда представляет собой отношение по отношению к этому значению. Но я согласен, это не идеально. Это потому, что inside-static был добавлен в конце игры. Это то, что я хочу убрать для Susy 3. - person Miriam Suzanne; 26.07.2014