Используйте SASS для написания CSS

Пару месяцев назад на работе мы начали использовать SASS, что бы облегчить написание CSS, а именно с фреймворком Compass. Хочу сразу сказать, что всем понравилось работать с этой связкой и она облегчила нашу участь, даже верстальщик остался доволен ;).

Compass обладает большим набором “строительных блоков” сразу из коробки. Он даже включает в себя BluePrint, но не обязывает его использовать.

Первое что понравилось, это то, что не нужно больше писать одно и тоже свойство CSS3 но с разными префиксами по несколько раз. Так же очень удобно, что любой класс (селектор) можно расширить при помощи уже созданного класса. Очень удобно что нету фигурных скобок, а есть как в python’не - отступы.

Для использования нам понадобится установить Ruby и Gem. Затем при помощи Gem установить “sass” и “compass”

$ gem install sass
$ gem install compass

Если у вас Ubuntu - не забудьте добавить путь к исполняемым файлам из Gem в PATH (/var/lib/gems/1.8/bin).

Для начала использования нужно в каталоге вашего проекта выполнить команду compass create --syntax sass которая создаст базовую структуру и первоначальные sass-файлы.

Синтаксис очень простой: сначала пишем селектор, а под ним правила и вложенные селекторы с правилами

$table-header-bgcolor: #ccc // задаем переменную с цветом

.table-content
  margin: 10px 5px
  tr
    th                    // аналогично записи в css ".table-content tr th"
      font-weigth: bold
      background-color: $table-header-bgcolor  // использование нашей переменной с цветом
  &:hover                 // "&" обозначает что этот селектор расширяет верхний на его уровне, то есть это ".table-content tr:hover"
    background-color: $table-header-bgcolor + #111 // да, он поддерживает арифметические операции с цветами

Так же приведу пример с миксином, который был написан для рендера кнопочек

@mixin button($color_from: #ffbe25, $color_to: #f58101, $link_color: #fff, $radius: 3px)
  +line-block()
  +border-radius($radius)
  +background-image(linear-gradient(top, $color_from, $color_to))
  +filter-gradient($color_from, $color_to)
  padding: 6px 10px
  a
    color: $link_color
    font:
      size: 110%
      weight: bold
    text-decoration: none
    &:hover
      color: $link_color

.button-default
  +button

.button-green
  +button($color_from: #696, $color_to: #390)

.button-round
  +button($radius: 50%)

Обязательно обратите внимание на создание спрайтов с иконками. С использованием Compass’а вам нужно написать 2-3 строки и сохранять иконки в правильный каталог, все остальное(css-класс и спрайт) сделает сам compass. Каталог с иконками задается относительно каталога картинок в настройках проект. Класс по умолчанию называются icon-<имя файла>

@import "icon/*.png";       // все png в каталоге icon будут добавлены в спрайт.
@include all-icon-sprites;

Пример из статьи можно взять тут: http://dl.dropbox.com/u/2169797/sass_blog_article.tar.gz

http://sass-lang.com/ http://compass-style.org/ http://lesscss.org/