Время от времени в Twitter, Reddit или StackOverflow возникает такой вопрос.
Почти каждый, кто работал с Sass хотя бы раз задавал его себе - что выбрать, Compass или Bourbon?
Оба проекта Compass и Bourbon являются фреймворками под Sass. Sass, как вы помните, является препроцессором CSS, не правда ли? Хорошо. Точно также, как если бы вы имели дело с jQuery или Backbone при работе в JavaScript, использование фреймворка для Sass облегчает работу с последним.
В этой статье я выскажу свое мнение по поводу использования Compass или Bourbon. Но, прежде всего, нужно сделать небольшой экскурс в историю.
История Compass и Bourbon
Compass заявляет о себе как о CSS фреймворке под Sass. Он поддерживается Chris Eppstein, одним из двух разработчиков Sass. Compass - это наполовину Ruby и наполовину Sass, он представляет из себя полный набор миксинов и инструмент под Sass. Более подробно о нем позже.
С другой стороны, Bourbon создан на Sass и для Sass великолепной командой разработчиков Thoughtbot. Если верить домашней странице проекта, Bourbon - это скорее библиотека, нежели фреймворк; простая и легковесная библиотека миксинов под Sass.
В итоге мы имеем с одной стороны Ruby/Sass фреймворк, а с другой стороны мы имеем библиотеку Sass. Совершенно разные вещи, не правда ли?
Миксины Compass и Bourbon
Если спросить пользователя Compass/Bourbon, для какой цели он использует данный инструмент, высоки шансы услышать однозначный ответ: для кросс-браузерной совместимости. Возможно, он ответит не совсем так, но ответ будет иметь приблизительно такой же смысл.
Как Compass, так и Bourbon являются огромной коллекцией миксинов для создания CSS3-эффектов; благодаря этим миксинам отпадает необходимость детально вникать в браузерные префиксы или CSS-уловки (CSS hacks).
Ниже показан пример миксина 1
box-sizing
// Compass
.boxsizing {
@include box-sizing(border-box);
}
// Bourbon
.boxsizing {
@include box-sizing(border-box);
}Тот факт, что Compass и Bourbon имеют одинаковый синтаксис для большинства миксинов, делает переход в использовании с Compass на Bourbon и с Bourbon на Compass очень легким.
Существует одно важное различие между этими инструментами: начиная с Compass 1.0 (вышел совместно с Sass 3.3), Compass получает информацию с сайта Can I Use. Это означает, что почти всегда данный фреймворк получает самую свежую информацию по браузерным префиксам.
В то время как библиотека Bourbon полностью зависит от обновлений, выпускаемых разработчиками данной библиотеки.
Замечание: если вы используете Autoprefixer для решения вопросов браузерных префиксов, то все вышесказанное не относится к вам.
Типографика в Compass и Bourbon
Оба - Compass и Bourbon - предоставляют набор готовых миксинов, переменных и функций для работы с типографикой. Помимо этого, Compass имеет в своем составе полноценный модуль для создания вертикального ритма, включая набор переменных и пару миксинов:
// Compass Vertical Rhythm
$base-font-size: 16px;
$base-line-height: 1.35;
$rhythm-unit: em;
element{
@include adjust-font-size-to(42px);
}
// CSS result
element{
font-size: 2.625em;
line-height: 1.06071em;
}У Compass также есть возможность поддержки единиц измерения 1
rem
1
px
1
rem
1
$rhythm-unit
1
em
Есть еще целая куча различных настроек, так что если вы являетесь поклонником типографики, Compass сможет ответить всем вашим требованиям.
Библиотека Bourbon обладает менее впечатляющим набором возможностей для работы с типографикой; однако у нее также есть все для быстрого старта разработки. В Bourbon есть не только возможность преобразования пикселей в 1
em
1
rem
1
golden-ratio()
1
modular-scale()
Несмотря на то, что эти функции не имеют прямого отношения к типографике, они отлично подходят для создания вертикального ритма в документе.
Собственно, Thoughtbot решили адресовать вопрос с типографикой другому их проекту (который может использоваться совместно с Bourbon) под названием Bitters. Более подробно о нем будет говориться в конце статьи.
CSS-сетки в Compass и Bourbon
Разве можно назвать фреймворк полноценным, если у него нет системы сеток (grid system), верно?
Фреймворк Compass имеет в составе систему Blueprint Grid, которая, насколько я знаю, не имеет ничего общего со старым фреймворком под названием Blueprint. Стоит сказать, что система Blueprint фреймворка Compass является неполноценной.
Среди всех людей, которые используют Compass и с которыми мне приходилось общаться, только один пробовал работать с Blueprint. Эта система настолько несовершенна, что Chris Eppstein решил убрать ее из Compass начиная с версии 1.0.0 (что соответствует Sass 3.3).
В тоже время библиотека Bourbon предоставляет пару миксинов, с помощью которых можно создать свою собственную сетку. Это функции 1
flex-*
1
grid-width()
Помимо этого, у команды Thoughtbot имеется своя собственная, отдельная от Bourbon, система сеток под названием Neat, которая позиционируется как легковесный семантичный фреймворк под Sass и Bourbon.
Таким образом, библиотека Bourbon не имеет в своем составе системы сеток (grid system), но можно свободно воспользоваться для этой цели фреймворком Neat.
Если сделать краткий итог по вопросу системы сеток, то можно сказать следующее. Если необходима система сеток с тесной интеграцией Sass-фреймворка, то мое мнение - это использовать связку Bourbon + Neat. Оба проекта были созданы одними и теми же людьми; в обоих проектах была заложена одна и таже основная идея. Это можно сравнить как два кусочка одного пазла.
Примечание переводчика: автор статьи упоминает о стороннем проекте Neat (система сеток) для библиотеки Bourbon. Но почему-то ни словом не говорит о проекте Susy?
Helpers
Одной интересной вещью Sass-фреймворков являются так называемые helpers. Helpers - это предустановленные CSS-правила, которые можно использовать в таблицах стилей как есть, для сокращения времени разработки проекта.
Например, Compass имеет набор helpers для float-clearing (включая несколько способов, как это сделать) и несколько CSS-хаков для старых версий браузера Internet Explorer; сброс стилей (несколько вариантов); несколько способов замещения текста изображением и многое другое.
В Bourbon такие helpers называются add-ons, но они выполняют туже работу; правда, в Bourbon их немного меньше, чем в Compass. Стоит сказать, что команда Thoughtbot включила с состав проекта Bitters большое количество helpers. Как было уже сказано выше, Bitters является сторонним проектом, который имеет прекрасную интеграцию с Bourbon и служит для целей создания типографики в проекте.
Спрайты Compass и Bourbon
Спросите пользователя Compass, почему он из месяца в месяц и из года в год использует эту библиотеку; клянусь, что в ответ услышим что-то о системе создания спрайтов. Это та вещь, которую Compass действительно выполняет хорошо. Благодаря тому, что Compass написан на языке Ruby, он может выполнять некоторые очень интересные вещи с файловой системой. Одной из таких фишек является способность создавать спрайты из коллекции изображений, размещенных в одной папке. Замечательно, не правда ли?
// Пример создания спрайтов в Compass
@import "icon/*.png";
@include all-icon-sprites;Помимо автомагического способа генерации спрайтов, Compass предоставляет пару интересных функций для доступа к файлу изображений прямо из таблицы стилей, наподобие 1
image-width()
1
image-height()
1
inline-image()
// Функции Compass доступа к файловой системе
.logo{
$image: "path/to/my/logo.png";
width: image-width($image);
height: image-height($image);
background: inline-image($image) no-repeat;
}Так как Bourbon построен только на Sass, у него нет возможности доступа к файловой системе и эта библиотека не может выполнить таких вещей, какие может Compass. Поэтому, если вы ищете способ динамического создания спрайтов и не хотите заморачиваться с такими менеджерами задач, как Grunt, Gulp или Ant, то выбор для вас очевиден.
Итог
И так, что же получаем в итоге - Compass или Bourbon?
Если спросить об этом меня, то я отвечу: никакой из них. Долгое время я был пользователем библиотеки Compass, покуда не отказался от его применения.
На сегодняшний день я предпочитаю добавлять в создаваемый Sass-проект свои собственные инструменты, нежели использовать весь фреймворк целиком. Но это что касается меня лично. Я думаю, что в большинстве случаев было бы лучше использовать весь фреймворк, по крайней мере, в случае больших проектов.
Поэтому я считаю, что имеется только два критерия, которые должны решать для вас вопрос выбора. И главным среди этих двух критериев является следующий (который вы должны задать самому себе): нужны ли мне возможности по обработке изображений (размеры изображений, спрайты и так далее)?
Библиотека Compass великолепно подходит для этих целей, но она выполняет свою задачу медленно, слишком медленно. Поэтому, если вас не устраивает такой факт, то посмотрите в сторону Bourbon. Эта библиотека замечательно быстрая хотя бы потому, что состоит из одних Sass-миксинов, выполняющих задачи Sass внутри таблиц стилей Sass.
Если вы решили использовать библиотеку Bourbon, то я бы рекомендовал вам также задействовать другие проекты команды Thoughtbot: Neat в качестве системы сеток (grid system), Bitters для типографики и еще не упомянутый до этого момента Refills (который является полной альтернативой фреймворка Bootstrap) с полным набором компонентов, готовый для использования в создаваемом проекте.
Примечание переводчика: в этой статье дан сравнительный обзор двух фреймворков - Compass и Bourbon. Лично для меня было бы интереснее посмотреть практические примеры использования библиотеки Bourbon.
Оригинал статьи: Sass Frameworks: Compass or Bourbon? от автора Hugo Giraudel.