Sass Frameworks: компас или бурбон?

Сетки

Что такое CSS-фреймворк без грид-системы? ПРАВО? Ладно.

Compass раньше поставлялся с Blueprint Grid (который, насколько я знаю, не имеет ничего общего с довольно старой CSS-фреймворком под названием Blueprint ). При этом, План Компаса действительно недостаточно используется. Из всех знакомых мне людей, которые используют Compass, только один когда-либо пробовал Blueprint. Он настолько недооценен, что Крис Эппштейн решил удалить его из Compass, начиная с версии 1.0.0 (соответствует Sass 3.3).

Тем временем Bourbon предлагает несколько миксинов, которые помогут вам построить собственную сетку. Существуют функции flex-* (которые не имеют ничего общего с Flexbox), а также grid-width() . На самом деле, Thoughtbot имеет свою собственную систему сетки за пределами Бурбона под названием Neat , которая описывает себя как облегченную семантическую структуру сетки для Sass и Bourbon . Таким образом, сам Бурбон не включает в себя систему сетки, вы можете использовать Neat.

Короче говоря, если вам нужна сеточная система, тесно связанная с вашей средой Sass, я предлагаю вам использовать Bourbon + Neat. Они построены одними и теми же людьми с одинаковыми идеями. Это как две части одной головоломки (легкая головоломка, ты должен признать).

Помощники

В рамках Sass интересно то, что они часто предоставляют помощников . Помощники — это предопределенные правила CSS, которые можно использовать непосредственно в таблицах стилей для экономии времени.

Например, Compass предоставляет помощника для очистки с плавающей точкой (включая несколько различных способов сделать это), несколько CSS-хаков для старых версий Internet Explorer, сброс настроек (с различными параметрами), некоторые методы замены изображений и многое другое .

Бурбон называет эти дополнения помощников, но предоставляет немного меньше помощников, чем Compass. При этом Thoughtbot включает в себя множество помощников в Bitters, стороннем проекте, который хорошо сочетается с Bourbon.

Спрайты

Попробуйте спросить пользователя Compass, почему он все еще использует эту библиотеку спустя месяцы или годы; Могу поспорить, он расскажет вам о построителе спрайтов. Это то, для чего Компас действительно хорош. Поскольку он частично построен в Ruby, Compass может делать довольно интересные вещи с файловой системой. Одной из таких вещей является создание спрайтов на основе папки изображений. Насколько это круто?

 // Compass simple API to build sprites
@import "icon/*.png";
@include all-icon-sprites;

Он не только дает возможность автоматически генерировать спрайты, но также предоставляет несколько удобных функций для доступа к данным файла изображения внутри ваших таблиц стилей, таких как image-width()image-height()inline-image()

 // Compass functions accessing file system
.logo {
  $image: "path/to/my/logo.png";
  width: image-width($image);
  height: image-height($image);
  background: inline-image($image) no-repeat;
}

Поскольку Bourbon построен только в Sass, он не может получить доступ к файловой системе, поэтому он не предоставляет ничего подобного. Поэтому, если вам нужен способ динамического создания файлов спрайтов, и вы не запускаете такой исполнитель задач, как Grunt, Gulp или Ant, тогда выбор здесь очевиден.

резюмировать

Для быстрого ознакомления, вот таблица, которая суммирует то, что я обсуждал.

Последние мысли

Итак, в конце концов: компас или бурбон?

Если вы спросите меня: ни один . Я был давним пользователем Compass до недавнего времени, когда я бросил его из-за отсутствия использования. Теперь я предпочитаю добавлять свои собственные инструменты в проект Sass, а не включать целый фреймворк. Но это только я. Я думаю, что в большинстве случаев было бы лучше использовать фреймворк, по крайней мере, для больших проектов.

Теперь есть несколько критериев, которые будут иметь значение при выборе, но я думаю, что первое, что вы должны задать себе: нужны ли мне функции, связанные с изображениями (размеры изображений, построитель спрайтов и т. Д.)?

Компас удивителен для этого, но замедляет его. Так медленно … Так что, если тебе это не нужно, тогда иди к Бурбону. Это невероятно быстро, так как в основном это всего лишь куча миксинов Sass, которые делают вещи Sass в ваших таблицах стилей Sass.

Кроме того, если вы решите использовать Bourbon, я бы порекомендовал использовать другие проекты Thoughtbot: Neat в качестве системы сетки, Bitters в качестве базовой линии (типографика, переменные, темы) и почему бы даже не Refills, который в принципе является конкурентоспособной альтернативой Bootstrap, предоставляя много компонентов, готовых к использованию в вашем проекте.