Что такое 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