SASS + Compass. Коротко о главном. Установка, настройка, преимущества.

Как наверное все уже в курсе того, что для упрошения и инкапсуляции шаблонов верски все чаще используются фрейворки. В них используется как правило один из языков разметки, таких как XML, JSON или Jade. Что позволяет разбивать структуру страницы на независимые друг от друга блоки и переиспользовать их на других страницах. Данная методология была разработана в Яндекс и получила свое название БЭМ (Блок Элемент Модификатор). К их числу можно отнести BEM-tools, сборки на основе Gulp и Grunt.

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

power

Итак, представляю Вашему вниманию стек из SASS и Compass. Постараюсь подробно рассмотреть чем примечателен SASS и каким образом его можно компилировать в Compass.

Преимущества SASS перед CSS.

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

  1. Константы. Очень полезная вещь, если в какой то момент мы захотели сменить любой параметр элемента, который мы предварительно вынесли в константы, будь то цвет или шрифт, тень или радиус скругления.
    Представьте ситуацию. Вы работает уже не первый месяц над своим проектом и в какой то момент Ваш заказчик говорит, что было бы хорошо сменить некий CSS параметр некоторых классов. Например скругление углов блоков с 3px на 5px. Ваши действия? Естественно, что Вы откроете CSS таблицу стилей с 10ю тысячами строк кода и начнете искать классы, которые содержат в себе данный параметр для то, чтобы изменить его так, как того хочет заказчик. Довольно нудное и трудозатратное занятие. Не так ли? Именно в таких случаях нам и необходимо использовать контанты, для того, чтобы фактические изменения затронули всю таблицу стилей, но при этом мы бы изменили лишь одну строчку.

    Пример:

    !default-font-face = Arial, Verdana, Helvetica, sans-serif;
    
    .class
    	:font = !default-font-face;
    
  2. @import. О, да это и в CSS есть, скажете Вы. Совершенно верно, но, в отличает от него в SASS с помощью него можно подключить не только reset.sass (файл с ресетами), constants.sass (файл с константами), файл с типографикой, но и «Абстрактные классы».
  3. Абстрактные классы (Mixins). Револючионная вещь на мой взгляд. С их помощью мы можем вынести какой то определенный набор параметров в абстрактный класс, а уже потом добавлять его всего лишь написав одну строчку — имя данного класса.

    Пример:

    =default-input
    	:background #999
    	:border 1px solid #333
    	:font
    		:family Tahoma
    		:font-size 14px
    		:line-height 18px
    
    input[type='text'] {
    	+default-input
    }
    
  4. Математические расчеты. SASS достаточно хорошо умеет работать с арифметикой. Он с легкостью может вычитать или суммировать цвета, размеры и т.д. и т.п.. Перечеслять можно очень долго, лучше покажу на реальном примере.

    Пример:

    !width-a1 = 100px
    !width-a2 = 50px
    !color = #333333
    
    .class
    	:backround-color = !color + #323232
    	:width = !width-a1 - !width-a2
    

Пожалуй на этом я перестану перечислять преимущества SASS над CSS, дабы не утомлять Вас большим кол-вом текста. Тем более, что все остальные фишки и особенности можно посмотреть в официальной документации к SASS.

Преимущества SASS над LESS и Stylus.

css-preprocessors

Согласен, прочитав сравнительный анализ SASS с CSS, Вы могли задуматься, а зачем создавать велосипед и изучать новый синтаксис, когда уже многие в полный рост используют препроцессорный язык LESS и Stylus.
Этот вопрос я постараюсь осветить ниже, но для поддержания интереса скажу, что смысл все же есть, и очень существенный.

А начнем мы пожалуй с того, что рассмотрим каким образом таки происходит генерация CSS стилей. Для генерации из SASS был разработан open-source CSS Framework под названием Compass. Написан он был на Ruby, но тем ни менее Вам не потребуется знание данного языка для работы с ним. Compass предполагает два варианта работы со стилями: через коммандную строку и через специальную оболочку. К сожалению оболочка является платным программным продуктом, но на мой взгляд 10$ не является препядствием в наши дни при профессиональном подходе. Хотя, если этот факт все же Вас остановит, то ничего страшного, в работе через коммандную строку ничего сложного нет. Вам потребуется лишь выучить 2-3 команды.

Так же существует еще один программный продукт для работы с SASS — это CodeKit, но его в рамках данной статьи мы рассматривать не будем, т.к. он является полностью коммерческим и будет стоить Вам 29$.

Для генерации CSS из LESS или Stylus готовых решений не существует. И дело даже не в том, что никто не придпринемал попыток это исправить, а в том, что данный язык не является стольже сильным и самодостаточным как SASS.

В последнее время все больше и больше заказчиков отказываются от поддержки старых браузеров и хотят видеть на своем сайте все прелести, которые предоставляет CSS3. Но тут не все так гладко как хотелось бы, ведь до сих пор некоторые CSS3 сво-ва браузеры поддерживают только через вендорные префиксы. Но и тут есть выход при использовании препроцессорных языков.
Как правило в таких случаях в LESS и Stylus используются Mixins (миксины/примеси), которые действительно сильно упрощают нам жизнь. В SASS есть примерно тоже самое, но отличительной особенностью его является то, что база из этих так называемых примесей дополняется и обновляется самими разработчиками, что согласитесь совсем не плохо. От конечного пользователя требуется всего лишь подключить их (@import "compass/css3").

Еще одна очень полезная и необходимая вещь — логика и циклы. Все из 3х претиндентов позволяют создавать «Защищенные примеси». Т.е. примеси, которые выполняются если само условие является истиной. Полезная вещь, если мы хотим накрутить как можно больше логики и динамики на выходной продукт. SASS дополнительно ко всему этому еще и предоставляет циклические операторы (for, while и each) и ряд доп. логических (if/then/else), которых в LESS и Stylus попросту нет. SASS так же умеет собирать сво-ва в единое целое. Например если Вы зададите backround при помощи картинки, ниже при помощи линейного градиента, то на выходе Вы получите собранное в единое целое, структурированное сво-во с вендорными префиксами, если же конечно вы включили их в конфигурационном файле.

Продолжая сравнивать их я лишь подчеркивал для себя, что SASS более мощный и развитый язык по отношению к LESS и Stylus. Так же было замечено, что и с математикой у SASS гораздо лучше. Например, если попробовать сложить 10px и 5em, то LESS на выходе выдаст 15px, что странно в общем то. SASS сообщит нам об ошибке в этом случае “Incompatible units: ‘em’ and ‘px'”.

Единственный минус, если его так можно назвать конечно — достаточно слабая документация по SASS. LESS в данном случае вне конкуренции со своим рускои англо язычными яркими сайтами. Но как не крути, кто хочет, тот всегда найдет и разберется.

Установка и начальная настройка SASS + Compass.

sass-getting-started

Установка в Linux и Windows различается только на первых этапах. Давайте рассмотрим их.

1. Установка Ruby.
– Lunux (Ubuntu) — sudo apt-get update && apt-get upgrade && apt-get install ruby
– Windows — скачать исполняемый файл Ruby Installer и установить его.

2. Установка SASS.
– All — gem install sass

3. Установка Compass
– All — gem install compass

На этом установка стека SASS + Compass заканчивается. Давайте посмотрим как нам развернуть свой первый проект и произвести наобходимые настройки.

Для этого нам необходимо создать директорию в которой в дальнейшем будет храниться наш проект и выполнить там команду: compass init
После этого в данной директории должны появиться файлы стилей *.sass и конфигурационный файл для Compass (config.rb). В нем хранятся основные настройки, такие как пути к директориям SASS, CSS, JS, IMAGES. Что позволяет нам перенести их к любое место в системе и прописать к ним реальный путь. Так же здесь можно включить минимизацию CSS стилей при сборке.

Команды:
– запуск вотчера, который следит за изменением файлов и пересобирает CSS — compass watch

На этом пажалуй все. Надеюсь Вы как и я оцените все прелести данного подхода. Все интересующие по данной теме вопросы Вы можете оставлять в комментариях ниже.