Sass (Syntactically Awesome Stylesheets) — модуль, включенный в Haml. Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Вложенные правила

Одна из ключевых особенностей Sass — вложенные правила, которые облегчают процесс создания и редактирования вложенных селекторов.

#header
  background: #FFFFFF
 
  .error
    color: #FF0000
 
  a
    text-decoration: none
    &:hover
      text-decoration: underline

Будет скомпилировано в:

#header {
  background: #FFFFFF;
}
#header .error {
  color: #FF0000;
}
#header a {
  text-decoration: none
}
#header a:hover {
  text-decoration: underline
}

Переменные в CSS

Sass добавляет к CSS константы и примеси. Это облегчает поддержку целостности данных внутри большого набора стилей. Константы позволяют установить значение и использовать его внутри стилей, с помощью примесей то же самое можно сделать с блоком атрибутов стиля.

$linkColor: #00F
 
a
  color: $linkColor

Будет скомпилировано в:

a {
  color: #00F
}

См. также

• Less

Ссылки

• Официальный вебсайт Sass
• Репозиторий исходного кода Haml/Sass (Git)