Susy — удобные Sass гриды вместо Bootstrap

Давно я собирался снять ролик про Susy, потому что пользуюсь уже больше года для разных проектов, но все как-то некогда было. А теперь, после появления статьи на css-tricks я понял, что пора.

Почему не Bootstrap?

В самом ролике я вскользь сказал о том, что Susy намного более гибкая система гридов, чем Bootstrap и Foundation, потому что есть возможность настраивать количество колонок, ширину каждой колонки или общую ширину контейнера. После этого в комментариях мне умудрились написать, что Bootstrap тоже легко кастомизировать на колонки.

Я конечно же понимаю, что есть Bootstrap Customizer и там можно заранее сделать себе хороший билд, в котором даже не будет 4000 на хрен не нужных строк CSS. Но тем не менее для последующих кардинальных изменений верстки это все равно не годится.

Susy config

В Susy же напротив можно все изменять на ходу и лично я считаю это самой важной и интересной фичей системы. Вот так выглядит типовой конфиг с моими комментариями:

$susy: (
  flow: ltr, // сменить дефолтное навправление колонок, можно задавать переменной и менять для арабских сайтов
  math: fluid, // можно использовать static для неадаптивных сайтов (если вы такие еще делаете)
  output: float, // используйте outside для исправлениях некоторых багов
  gutter-position: after, // возможны разные варианты, например, before и inside
  container: auto, // укажите максимальную ширину в любых единицах, например, 60em
  container-position: center, // если вы хотите сделать не по центру, то можно использовать left и right
  columns: 12, // количество колонок
  gutters: .25, // ширина пробельчика для каждой колонки
  column-width: false, // ширина колонки задается только при math: static
  global-box-sizing: content-box, // можно задать border-box, но иногда проще использовать border-box миксин из компаса
  last-flow: to, // последний элемент в ряду флоатится вправо, можно сменить
  debug: (
    image: hide, // варианты: show | hide | show-columns | show-baseline для показа всех вариантов колонок и линеечек
    color: rgba(#66f, .25), // менять цвет у колонок
    output: background, // есть еще вариант overlay, в котором колонки показываются только при наведении
    toggle: top right, // положение переключателя для показа оверлея
  ),
  use-custom: ( // для каждого из них если включить true будут использоваться миксины из Compass или ваши собственные)
    background-image: true, // возможность использовать свой миксин background-image
    background-options: false, // разные background миксины
    box-sizing: true, // свой миксин box-sizing
    clearfix: false, // свой миксин clearfix
    rem: true,
  )
);

В видео я несколько значений менял, посмотрите.

Для продвинутых пацанов

С YouTube приходят тревожные комментарии о том, что, дескать, я не дожал и нужно было еще рассказать про глубокие миксины, интеграцию с Breakpoint и вообще «что-нибудь еще», поэтому через неделю будет еще один обзор про Susy.

Я итак планировал это сделать, хотя вы мне теперь и не поверите.