Что такое Haml/Sass?
Haml (xHTML Abstraction Markup Language) это язык разметки для упрощённой генерации xHTML. В свою очередь эквивалент Haml для css — это Sass (Syntactically Awesome StyleSheets).
В данной статье я расскажу чем примечателен Sass. И с помощью чего sass-файл можно скомпилировать в css.
И так начнем.
Вкустности SASS.
Sass имеет ряд преимуществ перед css. Начну с import. Сам по себе import не является преимуществом sass перед css, но его использование становится еще более оправданным потому, что возможно подключать по мимо sass-файла c ресетами и sass-файла c типографикой, sass-файл с «константами» (об этом ниже подробнее), четвертый sass-файл с «абстрактными классами» (об этом так же ниже). Потом это все пакуется в одну готовую css-ку. Что избавляет от работы с огромным кодом.
И так константы (constants). Допустим по всему HTML документу к некоторым классам применим некий css параметр, и вдруг нам понадобилось его изменить. Скажем выделение разных элементов четырех пиксельным border голубого цвета. И нужно это заменить на двухпиксельный. Красного. Даже если он был всего лишь применим к трем классам (на деле же это ) это уже заставляет тратить дополнительное время. В таких случаях целесообразно использовать константы применимые сразу к нескольким элементам.
Пример:
!main_color = #00ff00
#main
:color = !main_color
:p
:background-color = !main_color
:color #000000
«Абстрактные классы» (Mixins). Это набор параметров изначально ни к какому элементу не принадлежащий. Но его в любой момент можно «приплюсовать» к тому или иному набору параметров элемента или класса. Что порой так же бывает удобно.
Пример:
=large-text
:font
:family Arial
:size 20px
:weight bold
:color #ff0000
.page-title
+large-text
:padding 4px
:margin
:top 10px
Арифметика. Так же один из плюсов sass является арифметика. Это и вычитание цветов друг из друга, и деление длин объектов, в общем всего-всего. Таким образом цветовую схему можно вообще задать одним цветом, а остальные задать арифметикой. В итоге меняем один цвет и оп ля-ля и у нас новая цветовая схема.
Пример:
!main_width = 10px
!unit1 = 5px
!bg_color = #a5f39e
#main
:background-color = !bg_color
p
:background-color = !bg_color + #202020
:width = !main_width + !unit1
Вот самые такие яркие особенности sass, остальное можно подглядеть в официальной документации.
Compass css framework.
Теперь вопрос как это все скомпилировать в css если мы не собираемся разрабатывать под Ruby,
Не так давно вышел очень удобный css framework compass, как раз таки работающий под sass и позволяющий компилировать sass в css.
Мы создаем compass-проект на основе одного из этих css фрэймворков и начинаем работу, а compass автоматически следит за изменениями sass-файлов и компилирует их в css.
Так же compass поддерживает 3 популярных фрэймворка:
- BluePrint
- YUI
- 960gs
Вот видео о данном взаимодействии sass и compass.
UPD: Поправил текст про import
