Начинаем работу с Sass и Bourbon

13 Ноября 2015

Автор: М.Дэвид Грин

Оригинал статьи: Getting Started with Sass and Bourbon

Оглавление:

• Что не так с обычным CSS
• Использование Sass
• Установка Sass
• Основы Sass
• Выбираем синтаксис
• Автоматическая компиляция CSS
• Добавляем Bourbon
• Установка Bourbon
• Ваш первый миксин с Bourbon
• Идем дальше

Это прошлогодняя статья с Sitepoint из серии статей о библиотеке Bourbon и ее дополнениях (Bitters, Neat). Я выкладываю перевод этой серии в первую очередь по причине того, что Яндекс и Google знают не так много о Bourbon на русском (есть небольшая статья в блоге Zencoder , перевод статьи Хьюго Жираделя оттуда же и совсем краткое введение на webref ). Ну и потому, что сейчас уже Thoughtbot работают над версией Bourbon 5.0 и скоро этот материал устареет значительно сильнее. Конкретно эта статья имеет смысл только в качестве введения в серию.

В этой статье, я надеюсь, смогу пробудить в вас интерес к компиляции и препроцессингу CSS, продемонстрировав установку Sass и Bourbon и рассмотрев интеграцию этих инструментов в ваш рабочий процесс.

Я также дам ссылки на обучающие ресурсы, что позволит вам использовать полученные знания для исследования возможностей этого метода разработки CSS.

Что не так с обычным CSS

Если вам также нравится CSS, как и мне, то вы уже знаете, что таких осталось немного. Для меня возможности и универсальность CSS это восторг, я ощущаю физическую дрожь, когда мне удается решить сложный кроссбраузерный вопрос или же заменить ресурсоемкий JavaScript анимацией CSS.

Но у многих людей нет такой очарованности, а есть вполне законные жалобы. Например, могут возникнуть трудности с отслеживанием наследования свойств у элементов с различным весом и расположением в разросшейся кодовой базе CSS. В CSS нет переменных, которые позволяют сразу применить стили во многих местах. И очень часто возникают проблемы с избыточным кодом, который сложно поддерживать и который нужен только для единообразия внешнего вида во всех браузерах.

Для меня самым элегантным решением этих проблем является работа Хэмптона Кэтлина и сообщества Open Source. Я говорю о Sass , препроцессоре для CSS, который позволяет вам писать чистый, поддерживаемый и структурированный код, генерирующий эффективный и полезный CSS.

А так как Sass поддерживает возможность создания новых и оригинальных расширений, разработчикам легко создавать свои улучшения. Одним из таких расширений, которое первым привлекло меня, является библиотека Bourbon. Sass предоставляет универсальные инструменты для компиляции CCS, Bourbon же построен на SASS и расширяет его функциональность, облегчая и ускоряя процесс написания чистого и компактного кода, который легко поддерживать.

Использование Sass

Есть несколько способов начала работы с Sass. Вы можете установить Ruby Gem , использовать набор разработчика, включающий Sass (типа CodeKit для Мака) или же использовать преимущества библиотеки LibSass для нативной компиляции в Node или C.

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

Установка Sass

Метод установки Sass это ваш личный выбор и он основывается на предпочитаемом вами окружении и ваших навыках. Ruby это один из наиболее удобных способов запуска Sass. Я, как и многие разработчики, использую Mac, а это значит, что Ruby в системе уже установлен. Поэтому я исхожу из того, что вам не надо устанавливать Ruby и вы можете запустить все команды в терминале. (Существует отличный гид по установке и запуску Ruby в различных окружениях, для пользователей Windows подойдет следующая статья .)

Зайдя в терминал и убедившись, что ваша версия Ruby не меньше 1.9.3 (Ruby -v), вы можете запустить следующую команду для установки Sass:

Bash

gem install sass

Убедитесь, что установка прошла нормально, проверив версию Sass:

Bash

sass -v

Вывод команды покажет номер установленной версии Sass — любая версия больше 3.3 будет отлично работать с примерами из моей статьи.

Основы Sass

Использование Sass вручную это просто передача файла .sass или .scss, содержащего соответствующий код, команде Sass в качестве аргумента вместе с именем файла-назначения, в котором будет находиться скомпилированный CSS. Для примера, откройте текстовый редактор и скопируйте следующий фрагмент в новый файл:

Sass (Sass)

.special

    background: #990000

    p

        color: #ffffff

Как вы видите, код похож на CSS, но он минималистичнее. Вместо использования фигурных скобок, синтаксис Sass (уже устаревший, но еще валидный) использует вложенные отступы. Вложение внутрь селектора .special элемента p говорит о том, что стиль будет применен только к тем параграфам, которые являются потомками элемента с классом .special.

Вы можете делать отступы с помощью табов или пробелов, главное соблюдать их единообразность. Для Sass очень важны отступы — так как форматирование текста используется для вложения селекторов, неправильные отступы могут повлечь неправильную компиляцию.

Сохраните файл test.sass в текущем каталоге. Затем в командной строке выполните следующую команду:

Bash

sass test.sass test.css

В том же каталоге будет сгенерирован файл test.css , содержащий скомпилированный CSS:

CSS

.special {

  background: #990000; }

  .special p {

    color: white; }

Вы заметили, что сделал Sass? В дополнение к фигурным скобкам и точкам с запятыми, Sass интерпретировал вложенность элемента p внутри селектора .special и создал новый селектор, ограниченный параграфами, которые являются потомками элементов с классом .special. Форматирование кода может показаться непривычным, но браузеры интерпретируют его правильно. (И кроме того, у вас есть способы изменить форматирование скомпилированного CSS ).

Выбираем синтаксис

Минималистичный синтаксис оригинального Sass по своему крут, но он не обязателен. После выпуска Sass был создан новый синтаксис, более привычный для разработчиков CSS, называемый SCSS (Sassy CSS). Тот же самый код из предыдущего примера в нем будет точно также обработан компилятором, при этом изначально он выглядит более привычно:

Sass (Scss)

.special {

    background: #990000;

    p {

        color: #ffffff;

    }

}

Сохранив этот фрагмент как test.scss и обработав компилятором, вы получите CSS, идентичный предыдущему.

С синтаксисом .scss отступы имеют значение только для удобства чтения кода и не влияют на компиляцию. Этот синтаксис облегчает обучение веб-разработчиков, привычных к CSS и не знакомых с Ruby.

Автоматическая компиляция CSS

Никто из разработчиков не хочет вручную компилировать Sass в CSS при каждом изменении стилей. Чтобы сделать этот трудоемкий процесс более удобным, вы можете заранее задать, где вы хотите видеть скомпилированные файлы и запустить выполнение этой задачи в фоновом режиме, сканируя нужные каталоги в поисках файлов .sass и/или .scss и компилируя их в нативный CSS автоматически.

В том же каталоге, где вы сохранили тестовые файлы, выполните в терминале следующую команду:

Bash

sass --watch test.sass:test.css

Теперь измените файл test.sass:

Sass (Sass)

.special

    background: #990000

    p

        color: #ccccff

Мы изменили значение color — и вы можете сразу увидеть результат изменений в скомпилированном файле test.css:

CSS

.special {

    background: #990000; }

    .special p {

      color: #ccccff; }

Вы можете передать в опцию --watch имя каталога, что позволит отслеживать изменения во всех находящихся в нем файлах.

После инсталляции и запуска Sass вы получите огромное количество возможностей, которые облегчат разработку и управление CSS. Кроме гибкости вложений, вы получите также переменные, расчеты, условные выражения, импорт, расширения, наследование и многое другое.

Sass стал очень популярным препроцессором CSS, в дополнение к отличному сайту с документацией существует много учебных курсов по работе с Sass .

Но мы не будем ограничиваться базовым Sass…

Добавляем Bourbon

Мощь Sass в его расширяемости. Подключив Sass в своем проекте, вы можете создавать собственные миксины, упрощающие вашу работу и автоматизирующие повторяющиеся и трудоемкие задачи. От талантов разработчика зависит, будет ли его код запутанным или элегантным.

Создание библиотеки своих инструментов для Sass может быть практичным и увлекательным, но экосистема Sass достаточно развита, чтобы не создавать их с чистого листа. Существует множество готовых библиотек. Одна из моих любимых — Bourbon , она легковесна и расширяема, ее создатели — разработчики из thoughtbot позаботились о том, чтобы в ней были все базовые инструменты.

Когда вам не хватает возможностей Sass, Bourbon придет на помощь и даст вам вендорные префиксы, миксины для продвинутых возможностей CSS типа анимации и border-image, функции для расчетов градиентов и изменения цвета, стили для кнопок и шрифтов. Bourbon также поддерживает глобальные настройки компиляции, поэтому вы можете настроить его поведение в приложении.

Установка Bourbon

Ruby 1.9.3 нашей системе уже есть, Sass работает, а, значит, установка Bourbon будет не сложнее установки Sass. Просто введите следующую команду:

Bash

gem install bourbon

Чтобы убедиться, что Bourbon работает, перейдите в каталог с тестовыми файлами и введите команду:

Bash

bourbon install

Вы получите подкаталог с основными файлами Bourbon. Рассматривайте эти файлы как стороннюю библиотеку, то есть не редактируйте их. Вместо этого, импортируйте их в свои файлы Sass и воспользуйтесь возможностями Bourbon в своем коде.

Если вы запустите команду sass --watch test.sass:test.css, вы заметите, что установка Bourbon никак не отразилась на вашем CSS. Чтобы Bourbon заработал, его необходимо подключить непосредственно из основного файла .sass или .scss.

Просто добавьте следующий фрагмент:

Sass (Sass)

@import bourbon/bourbon

.special

    background: #990000

    p

        color: #ccccff

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

Ваш первый миксин с Bourbon

В Sass вы можете создавать свои нативные функции, которые могу принимать аргументы, так называемые миксины . Вы можете вызвать их внутри вашего кода Sass с помощью директивы @include. Магия Bourbon происходит за счет подключения уже готовых миксинов. Например, одна из отличных возможностей Bourbon это генерация вендорных префиксов без дубликации кода.

С Sass и Bourbon, вы можете реализовать поддержку стилей со всеми вендорными префиксами буквально одной строчкой кода:

Sass (Sass)

@import bourbon/bourbon

.special

    @include linear-gradient(#990000, #000000)

    p

        color: #ccccff

В вашем обновленном файле CSS появятся дополнительные строчки, отражающие работу Bourbon по генерации вендорных префиксов и созданию запасного варианта для самых старых браузеров, не поддерживающих CSS-градиенты:

CSS

body {

  background-color: #990000;

  background-image: -webkit-linear-gradient(#990000, black);

  background-image: linear-gradient(#990000, black); }

  body p {

    color: #ccccff; }

Идем дальше

Я показал вам как установить Sass и Bourbon, как скомпилировать Sass в CSS и как импортировать Bourbon. В качестве следующего шага я советую изучить документацию Sass (русский перевод ) и Bourbon , ведь там достаточно возможностей для ускорения вашего рабочего процесса и улучшения продуктивности.

В сети существует множество ресурсов, облегчающих изучение Sass — есть отличные статьи от гуру sass Хьюго Жираделя , сайт The Sass Way , проводятся конференции , где вы можете узнать больше. И есть великолепная книжка Дэна Седерхольма “Sass для веб-разработчиков” .

По Bourbon в сети не так много ресурсов, я рекомендую это видео и сайт его создателей thoughtbot , демонстрирующий глубину и мощь этой замечательной библиотеки.

Комбинация Sass и Bourbon это мощнейший инструмент в вашем арсенале, а ведь мы еще не коснулись таких дополнений к Bourbon как Neat и Bitters . Все это будет в следующих статьях цикла.

Серия статей: "Библиотека Bourbon":

1. Начинаем работу с Sass и Bourbon
2. 5 способов улучшить Sass с помощью Bourbon
3. Семантические сетки с Sass, Bourbon и Neat
4. Добавляем Bitters к Bourbon и Sass
5. Bourbon Refills - готовые компоненты для ускорения разработки

13 Ноября 2015