Библиотека миксинов (mixin) под препроцессор Sass под названием Bourbon - вот о чем будет сегодняшний краткий обзор.
Данная статья не могла не появиться по нескольким причинам. Первая - я являюсь большим поклонником препроцессора Sass и библиотеки миксинов Compass под него. Библиотека Bourbon является аналогом Compass, просто она меньше по размеру и возможностям. Но это не значит, что она хуже - она обладает некоторыми возможностями, которых нет в Compass.
Помимо этого, существует прекрасная сравнительная статья Sass-гуру Hugo Giraudel, посвященная этим двум библиотекам под один препроцессор. Оригинал статьи находиться здесь - Sass Frameworks: Compass or Bourbon?, а посильный перевод этой статьи размещен здесь - Что выбрать - Compass или Bourbon?. В этой статье Юг Жиродель (Hugo Giraudel) приводит преимущества использования библиотеки Bourbon и сопутствующих ему пакетов, таких как Neat для создания адаптивной CSS-сетки (grid).
Однако, после прочтения вышеназванной статьи один вопрос остается открытым - а как установить библиотеку Bourbon? Что можно в ней делать и как это делать? На эти вопросы я постараюсь ответить самому себе (и возможно - вам, уважаемый читатель).
Установка библиотеки Bourbon
Инсталляцию библиотеки миксинов Bourbon я буду производить под операционной системой Linux Mint 17 Cinnamon, просто потому что мне так интереснее. Под OS Windows процесс ничем не отличается от того, который будет описан здесь. Единственное условие - на момент установки Bourbon в системе уже должны стоять и нормально работать Ruby + Sass.
Установка библиотеки сводиться к одной вещи - установке пакета 1
bourbon
$ sudo gem install bourbonПроверяю, какая версия этой библиотеки “попала” ко мне:
$ bourbon -v
Bourbon 4.0.2Отлично! Теперь можно приступать к разворачиванию проекта с поддержкой Bourbon.
Создание проекта Bourbon
Перехожу в директорию с опытными (подопытными?) образцами всего разного и создаю там папку с именем 1
bourbon
$ cd ~/Projects/
$ mkdir bourbon
$ cd bourbon/… и запускаю там команду:
$ bourbon install
Bourbon files installed to bourbon/Не знаю, как вы, а я сразу после этого задал себе вопрос - “А что это было?” Что это за команда и зачем она нужна? Все оказалось просто.
В библиотеке Compass в таблице стилей конкретно указывается, какой модуль необходимо подключить к проекту. К примеру, таким образом:
@import "compass/reset";
@import "compass/utilities/general/clearfix";
@import "compass/css3/transition";
@import "compass/css3/border-radius";В результате Compass выборочно подгружает по сети только указанные модули. И ничего больше.
Библиотека Bourbon поступает прямо противоположно - она устанавливает локально, в отдельную папку проекта (имя этой папки всегда - 1
bourbon
1
bourbon
$ ls -l bourbon/
drwxr-xr-x 2 addons
-rw-r--r-- 1 _bourbon-deprecated-upcoming.scss
-rw-r--r-- 1 _bourbon.scss
drwxr-xr-x 2 css3
drwxr-xr-x 2 functions
drwxr-xr-x 2 helpers
drwxr-xr-x 2 settingsВидим, что все миксины “расфасованы” по папкам в зависимости от их назначения. Давайте “заглянем” в одну из этих подпапок - пусть это будет 1
css3
Видим здесь готовые миксины для создания самых различных CSS3-эффектов - 1
border-radius
1
gradient
1
transform
1
transition
Включение библиотеки Bourbon в проект
Дело осталось за малым - включить поддержку миксинов библиотеки в таблицу стилей. Выполняется это обычно, директивой 1
@import
$ mkdir sass
$ mkdir css
$ touch sass/style.scss
$ touch css/style.css
$ touch index.html… и помещаю одну строку в таблице стилей 1
style.scss
@import "bourbon/bourbon";Мониторинг изменений в проекте Bourbon
Чтобы автоматически отслеживать изменения в файле таблиц стилей 1
style.scss
$ sass --watch sass/style.scss:css/style.cssИспользование библиотеки Bourbon
Ну и что, скажете вы? Что дальше? А ничего - дальше только пользоваться библиотекой Bourbon. Для этого с главной страницы проекта Bourbon переходим на страницу документации, нажав кнопочку Bourbon Documentation. В правом верхнем углу есть две ссылки, одна из которых “View Spec” - ведет на страницу CSS-документации MDN, а вторая “View Source” - на страницу GitHub c рабочими примерами миксинов.
Также видим, что миксинов здесь даже на беглый взгляд значительно меньше, чем в библиотеке Compass. Ну это ничего.
Bourbon - создаем кнопки
Давайте для начала создадим на Bourbon что-нибудь простенькое. Пусть это будут кнопки. Для этого перейдем на страницу документации по созданию кнопок - Button.
Видим, что в библиотеке Bourbon есть три готовых миксина для создания кнопок:
1
simple
1
pill
1
shiny
Поэтому в HTML-коде создаю кнопку:
<button class="simple" type="button"></button>… и прописываю для нее миксин в таблице стилей 1
style.scss
.simple{
@include button;
}Смотрим результат в браузере - готовая красивая синенькая кнопочка! Точно также можно создать еще две другие кнопки, с помощью миксинов 1
pill
1
shiny
.pill{
@include button(pill);
}
.shiny{
@include button(shiny, #ff9900);
}Ради любопытства посмотрите на скомпилированный CSS-код этих кнопок в файле 1
style.css
Bourbon - создаем треугольники
Кто из внимательных читателей может на память создать треугольник на чистом CSS? Конечно, там нет ничего сложного, но уверен - время у вас все равно уйдет на то, чтобы вспомнить все тонкости этого процесса - обнулить ширину и высоту, задать ширину и цвет границы, убрать ее с трех остальных сторон и так далее.
А вот в библиотеке Bourbon эта задача выполняется в одну строку, для этого достаточно миксину 1
triangle
@include triangle(2em, #ff9900, up);Все - треугольник готов! Самые разные варианты создания теругольников хорошо описаны на странице документации - Triangle.
Заключение
На этом задачу ознакомления с библиотекой Bourbon считаю законченной. Читайте документацию - там все хорошо описано!