С начала 2014 года на работе произошли некоторые изменения, благодаря которым меня познакомили с замечательной штукой — препроцессор SASS и HAML. В этой статье рассматривается только SASS. Установлен он в паре с COMPASS, что позволяет ускорять процесс написания CSS до космических скоростей, а самое главное быстро вносить правки в существующий проект.

Для работы понадобится следующее:

1. ruby
2. гем sass
3. гем compass
4. редактор Webstorm

Немного поковырявшись с установкой и почитав инструкции, я незамедлительно начал готовить под типовые задачи. Самое убийственное это было правильно указать аргументы для compass, чтобы он брал только один главный файл sass, и преобразовывал это все в привычный css.

Смысл использования препроцессора в сокращении кода и его систематизации. Приведу пример: типовой сайт с шапкой, подвалом, колонками. Структура стилей будет выглядеть так:

Файл application.sass подключает в себя поочередно все файлы из директории general и преобразует это все в css. Но самое интересное здесь — это использование:

• миксинов (повторное использование)
• переменных (со значениями можно проводить арифметические действия)
• упрощенное написание

$headerHeight: 100px
$leftColWidth: 200px
$rightColWidth: 200px

$basicMargin: 8px

a
  text-decoration: none
  color: #369

  &:hover
    text-decoration: underline
    color: #a00

  &:active
    background: #ff0

.header
  height: $headerHeight
  background: #eee

  .logo
    width: $leftColWidth
    height: $headerHeight
    background: url('logo.png') #A00

.sidebar-first
  float: left
  width: $leftColWidth

.sidebar-second
  float: right
  width: $rightColWidth

.content
  margin: 0 $rightColWidth 0 $leftColWidth

  h1
    font-size: $basicMargin*4

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

На выходе мы получаем следующий css

a {
  text-decoration: none;
  color: #336699; }
  a:hover {
    text-decoration: underline;
    color: #aa0000; }
  a:active {
    background: yellow; }

.header {
  height: 100px;
  background: #eeeeee; }
  .header .logo {
    width: 200px;
    height: 100px;
    background: url("logo.png") #aa0000; }

.sidebar-first {
  float: left;
  width: 200px; }

.sidebar-second {
  float: right;
  width: 200px; }

.content {
  margin: 0 200px 0 200px; }
  .content h1 {
    font-size: 32px; }

Спустя вот уже полгода, писать на чистом css мне жутко неудобно. Теперь все разложено по полочкам.