Susy 3 — инструмент для верстки сеток на SASS

Сами авторы больше не рекомендуют использовать Susy прошлых версий в качестве основного решения для формирования макета верстки. С появлением flexbox и CSS Grid все меньше и меньше причин использовать какие-либо библиотеки для сеток.

И собственно это и прекрасно! Все существующие решения сеток, по сути, временное решение, до тех пор, пока браузеры не будут соответствовать современным спецификациям CSS.

Однако даже если вам не нужно поддерживать старые версии браузеров, даже современные CSS сетки требуют ручного вмешательства, требуют математических вычислений.

Текущая новая версия Susy 3 отсекла всё лишнее и состоит только из самых основных функций.

Имеющийся набор функций можно использовать c float, flexbox, CSS grid и любым другим CSS. Susy можно использовать на лету для математических вычислений сеток или же использоваться для создания вашей сетки, на основе ваших именований классов, которые будут соответствовать требованиям вашей команды и вашего проекта.

Если математика становится сложной для вычисления сеток, то Susy 3 может помочь, если же получается использовать простые вычисления, то и нет надобности в Susy.

В Susy 3 больше нет миксинов и это главное существенное отличие от прошлых версий. Susy 3 теперь имеет четыре основных настройки, в одной карте настроек.

Карта настроек выглядит следующим образом:

$susy: (
  'columns': susy-repeat(12),
  'gutters': 30px,
  'spread': 'narrow',
  'container-spread': 'narrow',
);

Columns

Columns (колонки) теперь принимает не одно значение, а несколько. Синтаксис теперь похож на синтаксис из CSS grid: grid-template-columns, то есть список относительных размеров для каждой колонки в сетке.

Безразмерные числа в Susy очень похожи на единицу fr в CSS, а функция susy-repeat () (аналогична css функции repeat ()) помогает быстро установить колонки равной ширины.

.grid{
  display: grid;
  grid-template-columns: 220px repeat(4, 1fr);
  grid-column-gap: 10px;
}

grid-template-columns: 220px 1fr 1fr 1fr 1fr;

grid-template-columns: 220px 25% 25% 25% 25%;

grid-template-columns: 200px 1fr 2fr 1fr;

grid-template-columns: 2fr 3fr 2fr;

Приведем примеры, которые может принимать свойство columns:

• susy-repeat (12) — будет создано 12 адаптивных колонок равной ширины

• susy-repeat (6, 120px) — будет создано 6 колонок одинаковой ширины равной 120px

• 120px susy-repeat (4) 120px — будет создано 6 колонок, первая и последняя шириной 120px, а пространство между ними, будет поделено на равные четыре части (колонки)

• susy-repeat (3, 6em 100px) — будет создано 6 колонок, создать три раза по две колонки размерами 6em и 100px, т. е. 'columns': 6em 100px 6em 100px 6em 100px

Gutters

gutters — это ширина отступа между колонками, можно задать как статической единицей, например 30px, так и динамической, например, 1% или фракцией 0.25.

Spread

spread — описывает распространение сетки

Container-spread

У каждого spread есть три возможных значения:

• narrow (узкий) — когда отступы находятся только между колонками в сетке, то есть: число отступов = число колонок — 1

• wide — в некоторых сетках, используются половинчатые отступы с обеих сторон колонки, как в bootstrap, в результате между колонками получается полный отступ, сложенный из двух половинок.

• wider — сетка, в которой с обеих сторон полноразмерные отступы

Теперь разберемся со всем этим на примерах построения реальных сеток

$susy: (
    'columns': susy-repeat(12),
    'gutters': 30px,
    'spread': 'wide',
    'container-spread': 'wide',
);

HTML

<div class="grid">
  <div class="grid__item" data-span="4" data-push="1">
    <div class="card">контент</div>
  </div>
  <div class="grid__item" data-span="3">
    <div class="card">контент</div>
  </div>
  <div class="grid__item" data-span="4">
    <div class="card">контент</div>
  </div>
</div>

Float

Сетка на float со спредом в режиме narrow

SCSS:

.grid{
    &__item{
      float: left;
      margin-right: gutter();
      &:last-child{
        margin-right: 0;
      }
    }
}
[data-push="1"]{
  margin-left: span(1 wide of 12 narrow);
}
[data-span="3"]{
  width: span(3 narrow of 12 narrow);
}
[data-span="4"]{
  width: span(4 narrow of 12 narrow);
}

Сетка на float со спредом в режиме wide

SCSS:

.grid{
    margin-left: - gutter()/2;
    margin-right: - gutter()/2;
    &__item{
      float: left;
      padding: 0 gutter()/2;
    }
}
[data-push="1"]{
  margin-left: span(1);
}
[data-span="3"]{
  width: span(3);
}
[data-span="4"]{
  width: span(4);
}

Сетка на float со спредом в режиме wider

SCSS:

.grid{
    margin-left: - gutter();
    margin-right: - gutter();
    &__item{
      float: left;
      padding: 0 gutter();
      margin-right: - gutter();
    }
}
[data-push="1"]{
  margin-left: span(1 wide of 12 wider);
}
[data-span="3"]{
  width: span(3 wider of 12 wider);
}
[data-span="4"]{
  width: span(4 wider of 12 wider);
}

Flexbox

Сетка на flex со спредом в режиме narrow

SCSS:

.grid{
    display: flex;
    flex-direction: row;
    &__item{
      margin-right: gutter();
      &:last-child{
        margin-right: 0;
      }
    }
}
[data-push="1"]{
  margin-left: span(1 wide of 12 narrow);
}
[data-span="3"]{
  width: span(3 narrow of 12 narrow);
}
[data-span="4"]{
  width: span(4 narrow of 12 narrow);
}

Сетка на flex со спредом в режиме wide

SCSS:

.grid{
    display: flex;
    flex-direction: row;
    margin-left: - gutter()/2;
    margin-right: - gutter()/2;
    &__item{
      padding: 0 gutter()/2;
    }
}
[data-push="1"]{
  margin-left: span(1);
}
[data-span="3"]{
  flex: 1 1 span(3);
}
[data-span="4"]{
  flex: 1 1 span(4);
}

Сетка на flex со спредом в режиме wider

SCSS:

.grid{
    display: flex;
    flex-direction: row;
    margin-left: - gutter();
    margin-right: - gutter();
    &__item{
      padding: 0 gutter();
      margin-right: - gutter();
    }
}
[data-push="1"]{
  margin-left: span(1 wide of 12 wider);
}
[data-span="3"]{
  width: span(3 wider of 12 wider);
}
[data-span="4"]{
  width: span(4 wider of 12 wider);
}

CSS grid

Сетка на grid со спредом в режиме narrow

SCSS:

.grid{
    display: grid;
    grid-template-columns:
      span(1 narrow of 12 narrow)
      span(4 narrow of 12 narrow)
      span(3 narrow of 12 narrow)
      span(4 narrow of 12 narrow);
    grid-column-gap: gutter();
    &__item{

    }
}

• Про спреды
• Блог по Susy
• Статья про Susy 3
• Про единицу fr в гридах