Smart Grid - модуль Node

Smart Grid при запуске по переданным настройкам генерирует файл с полезными примесями. От настроек зависит количество примесей и некоторые аспекты их работы.

И это решающее преимущество над другими препроцессорными сетками!

1. Описывать настройки в виде javascript-объекта гораздо удобнее.

Препроцессоры не очень подходят для описания большого количества настроек.

Пример настройки контрольных точек из bootstrap:

$grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px
) !default;

Выглядит адекватно.

Но а что если нам менять не только размер, но и поля сайта (padding контейнера) на каком-либо break point?

Тогда рядом будет лежать какая-нибудь переменная $grid-container-fields. То есть объединённые по смыслу настройки разлетаются на кучу мелких переменных.

Javascript-объекты гораздо лучше структурируют информацию:

{
   lg: { width: "1200px" },
   md: { width: "992px", fields: "15px" },
   sm: { width: "720px" },
   xs: { width: "576px" }
}

2. Есть возможность сгенерировать библиотеку под выбранный препроцессор.

Без приключений и использования так называемых портов SCSS-bootstrap на другие препроцессоры. Smart-grid анализирует настройки и превращает шаблонный код в один из выбранных синтаксисов:

• LESS
• SCSS
• Sass
• Stylus

То есть, вы анализируете макет, описываете настройки сетки и генерируете вспомогательную библиотеку именно под ваш препроцессор. После чего подключаете сгенерированный файл и используете примеси из него.

Также необходимо заметить, что при использовании препроцессорных сеток рекомендуется добавить группировку media-запросов к вашему списку постпроцессоров .