Последние несколько месяцев я использую систему сетки Sass под названием Neat . Это сделано почти все, что мне нужно, и довольно легко начать. Однако в последнее время я обнаружил, что пишу дополнительные стили для увеличения аккуратной сетки. Вместо того, чтобы расширять его самостоятельно, я решил найти систему решетки Sass, которая была бы более мощной. Эта система — Сьюзи .
Grid Framework, а не Grid System
Прежде чем мы перейдем к тому, как использовать Susy, давайте поговорим о важности использования Grid-инфраструктуры Sass , а не Grid-системы . Поскольку я использовал Sass Grid Framework для разметки, я обнаружил 3 основных преимущества.
Во-первых, я могу дать свою разметку любым классам, которые мне нравятся. Неважно, если вам нравится BEM, SMACSS, OOCSS или любая другая структура именования классов: вы можете использовать такую среду, как Susy, не меняя разметку. С другой стороны, системы сетки (такие как Bootstrap, например) требуют, чтобы вы добавили имена их классов в вашу разметку.
Во-вторых, сеточные каркасы более удобны в обслуживании. Вы можете изменить ширину столбцов и другие стили визуального макета, изменив только некоторые строки Sass: ваши настройки или несколько миксинов. Но если вы попытаетесь изменить свой макет с помощью системы сеток на основе классов, вам придется переписать свою разметку.
В-третьих, инфраструктура сетки препроцессора легче и быстрее для ваших пользователей. При правильном использовании фреймворк будет выводить только те стили, которые вам нужны для вашего конкретного выбора макета. Система сетки, с другой стороны, будет включать в себя все стили для всех сеток на всех ширинах, что потребует от вас небольшого сокращения, если вы хотите, чтобы ваши сайты были красивыми и стройными.
Основной синтаксис
Давайте начнем с того, что нужно пройти с минимума, который вам нужно знать, чтобы построить простую схему на основе Susy. Попутно я буду сравнивать его с синтаксисом Neat для того же вывода: если вы также переключаетесь с Neat на Susy, это поможет вам перевести основные понятия.
Susy Config: $susy Карта
Все ваши глобальные настройки для Susy хранятся в карте с именем $susy . Это позволяет легко хранить данные конфигурации в одном месте. Если вы собираетесь сгенерировать сетку из 12 столбцов с разрешением 960 пикселей по 20 пикселей между каждым столбцом, вы должны использовать следующую карту:
$susy: ( columns: 12, gutters: .25, container: 960px );
Значение gutters соответствует проценту от полной ширины столбца. Поскольку 12 столбцов в контейнере 960px будут по 80px каждый, следовательно, .25 даст нам (грубый) желоб 20px.
Обратите внимание, что вы можете использовать дробное значение gutter (например, 1em / 8em) со значением column-width и math: static , но округленное 0,25, вероятно, проще, чем все это.
В Neat вы бы использовали ряд переменных для этой настройки:
$grid-columns: 12; $max-width: 960px; $gutter: 20px;
С одной стороны, переменная $gutter Нейта является более мощной, чем значение $gutter Сьюзи: она будет принимать значение px, em или%. Но с другой стороны, все эти незаданные переменные представляют больший риск конфликта плагинов Sass. Еще одна «ошибка» в переменных Neat заключается в том, что лучше всего объявить их, прежде чем импортировать Neat в свои основные файлы Sass.
Создание контейнеров: container() Mixin
container() mixin container() будет использовать информацию в $susy и настроит контейнер (clearfix, max-width и & centtered) для ваших элементов сетки. Его использование очень просто:
.content { @include container; }
Neat делает примерно то же самое с миксинами external outer-container() и row() . Лично я предпочитаю иметь только один миксин, чтобы беспокоиться об этом: в некоторых случаях row() может стимулировать дополнительную разметку, имитирующую шаблон Bootstrap .container > .row > .col , где дополнительная обертка не нужна.
Определение столбцов: span() Mixin
Чтобы выровнять дочерние элементы вдоль сетки, используйте mixin span() . В Сьюзи требуется 3 параметра: диапазон, местоположение, расположение.
.sidebar { @include span(5); // width = 5 columns of $susy: ( columns ) value } .sidebar { @include span(5 of 12); // width = 5/12 with margin specified by $susy: ( gutter ) } .sidebar { @include span(5 at 8 of 12); // width = 5/12 with margin removed from right // because 5 col starting at 8 = last column }
Параметр location также может быть записан с ключевыми словами first и last :
.sidebar { @include span(5 last); }
В Neat я использовал span-columns() . Для этого потребовалось несколько различных параметров: количество столбцов (с необязательным счетчиком столбцов контекста) и отображение (позволяет установить макет блока / ячейки таблицы).
Расширенные возможности
Теперь, когда мы рассмотрели основы настройки сетки с параметрами конфигурации в $susy , container() и нескольких дочерних $susy с span() , давайте рассмотрим некоторые из наиболее мощных вещей, которые Susy может легко сделать.
Изменение with-layout() : with-layout() Mixin
Что если вам нужно установить различное количество столбцов на разных страницах? Сьюзи делает это легко с миксином with-layout() . Это позволяет вам временно переопределить вашу глобальную конфигурацию $susy для одного блока кода. (Думайте об этом как о том, чтобы определить переменную)
.different-column-count { @with-layout(10); // deviates from the global 12 columns // & calculates span() based on 10 }
У Neat нет эквивалента этому: вам нужно явно включить новый счетчик столбцов для каждого дочернего @include span-columns(X of 10) : @include span-columns(X of 10) .
Изменение выхода: output: isolate настройка output: isolate
Браузеры не лучшие в математике. Я знаю, они просто компьютерные программы: они должны быть идеальными. Но они округляют проценты до ближайшего пикселя, а в некоторых случаях это может помешать точному выравниванию сетки. Сьюзи поддерживает технологию плавающего CSS, называемую «изолировать», которая исправляет это с помощью некоторой причудливой магии отрицательного поля. Просто $susy output: isolate в настройках $susy . Это может быть необязательно все время, но если вы недовольны каким-то выбором браузера, это, вероятно, сгладит ситуацию для вас.
Neat не предоставляет эту опцию вывода, но он допускает вывод сетки на основе таблицы CSS.
Обоснование столбцов: last-flow: to Настройка
Иногда вам нужен макет сетки, где общее количество дочерних столбцов меньше, чем количество столбцов сетки, и вы хотите промежуток в середине. Другими словами, вы хотите, чтобы :last-child плавал направо, а не лежал рядом с соседом слева. Для этого также $susy настройка $susy : last-flow: to .
У Neat нет этой функции: вам нужно написать простой CSS для этого:
.container { :last-child { float: right; } }
Получение Column-Width: span() Функция
Возможно, вам придется использовать ширину столбца в другой части вашего CSS, кроме макета сетки. Для этого Susy предоставляет функцию span() (не путайте ее с mixin span() !). Например, вы можете захотеть, чтобы все ваши встроенные изображения имели ширину 4/12 столбцов, но вы не размещаете их в сетке:
.container img { width: span(4 of 12); height: auto; }
Если бы у Нейта была эта функция, это могло бы быть делом, но это ставит Сьюзи вперед.
Получение ширины gutter() : функция gutter()
Это работает так же, как функция span() выше, но gutter() возвращает ширину желоба, используемую сеткой. Вы можете использовать это, если вы делаете какое-то вертикальное выравнивание и хотите, чтобы оно соответствовало вашим сеточным желобам:
.article-title { margin-bottom: gutter(); }
В Neat вы можете получить это измерение, просто вызвав переменную $gutter .
Реальные сетки: gallery() Mixin
Это один из моих любимых миксинов Сьюзи. Большинство сеточных макетов просто делают несколько столбцов внутри контейнера clearfix. Что если вы хотите иметь несколько строк фактического содержимого сетки в одном контейнере? Сьюзи дает вам мощную gallery() mixin. Это позаботится о тех неприятных вещах :last-child поля для вас исправят. (Вы можете сделать это вручную с помощью CSS :nth-child(#{$grid-count}n) { margin-right: 0 } , но почему бы не позволить Сьюзи сделать это за вас?)
.gallery-item { @include gallery(3 of 12); }
Neat имеет миксин omega(#{$grid-count}n) для выполнения этого макета. Я бы предпочел использовать один миксин и сэкономить время. gallery() Сьюзи gallery() mixin делает работу чище, меняя ширину точек останова:
.grid-item { @include gallery(6); @media (min-width: 600px) { @include gallery(4); } @media (min-width: 800px) { @include gallery(3); } }
Адаптивные Сетки
Возможно, вы заметили, что я использовал стандартные медиа-запросы CSS (вложение Sass, но все же, просто медиа-запросы) для точек останова. Сьюзи не имеет полноценного менеджера точек останова; разработчики рекомендуют использовать Breakpoint и предоставляют susy-breakpoint() вспомогательный миксин, который вызывает Breakpoint:
@include susy-breakpoint(720px, 8) { // At a min-width of 720px, Susy will use a 8-col grid .responsive-grid-item { @include span(4); } }
У Neat есть набор вспомогательных функций и миксинов точек останова, но я никогда не использовал их. Я использую свой собственный миксин точек останова и никогда не нуждался в инструментах Нейта.
Вывод
Управление сеткой и макетами столбцов с помощью Sass — это отличный способ упростить разработку, упростить обслуживание и ускорить запуск сайтов. Susy предоставляет мощный инструментарий для определения и использования различных макетов сетки, предоставляя вам свободу написания классов в разметке HTML, как вы считаете нужным.