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

Sass
Тип	Компилирующий обработчик шаблонов
Разработчик	Nathan Weizenbaum, Chris Eppstein, Hampton Catlin
Операционная система	Кроссплатформенная
Первый выпуск	28 ноября 2006
Последняя версия	Dart Sass: 1.53.0 (22 июня 2022)[1]
Лицензия	MIT License
Сайт	sass-lang.com

Язык Sass имеет два синтаксиса:

• sass — отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов;
• SCSS (Sassy 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; 
}

Пример использования примесей, подобие функций:

@mixin border-radius($radius,$border,$color) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
    border:$border solid $color
}
.box { @include border-radius(10px,1px,red); }

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

.box {
   -webkit-border-radius: 10px; 
      -moz-border-radius: 10px; 
       -ms-border-radius: 10px; 
           border-radius: 10px; 
   border: 1px solid red; 
}

См. также

• Less
• PostCSS

Литература

• Alex Libby. Instant SASS CSS How-to. — Packt  (англ.) (рус., 2013. — 80 p. — ISBN 9781782163794.
• Ben Frain. Sass and Compass for Designers. — Packt  (англ.) (рус., 2013. — 274 p. — ISBN 9781849694551.
• Hampton Catlin, Michael Lintorn Catlin. Pragmatic Guide to Sass. — Pragmatic Bookshelf, 2011. — 112 p. — ISBN 9781934356845.
• Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Adam Stacoviak. Sass and Compass in Action. — Manning Publications  (англ.) (рус., 2013. — 300 p. — ISBN 9781617290145.
• Брайан Хоган, К. Уоррен, М. Уэбер, К. Джонсон, А. Годин. Глава 5. Рабочий процесс → Рецепт 28. Модульные таблицы стилей с помощью Sass. // Книга веб-программиста: секреты профессиональной разработки веб-сайтов. — Питер. — С. 197-203. — 288 с. — (Библиотека программиста). — 2000 экз. — ISBN 978-5-459-01510-2.
• Antony Kennedy, Inayaili de Leon. Ch. 9. Dynamic CSS → SASS // Pro CSS for High Traffic Websites. — Apress, 2011. — P. 279-293. — 432 p. — (Expert's voice in web design). — ISBN 9781430232896.
• Jennifer Niederst Robbins. Ch. 18. CSS Techniques → Sass and LESS // Learning Web Design. Fourth Edition. — O'Reilly, 2012. — P. 433. — 621 p. — ISBN 978-1-449-31927-4.
• Alex Starostin. Improve CSS development with Sass (неопр.). IBM developerWorks (28 мая 2013). Дата обращения: 14 декабря 2013.
• Ragnar Kurm. Compile Your Style: Structuring and automating CSS (неопр.). Web & PHP Magazine. Дата обращения: 14 декабря 2013.
• Jeremy Hixon. An Introduction To LESS, And Comparison To Sass (неопр.) (недоступная ссылка). Smashing Magazine (9 сентября 2011). Дата обращения: 31 марта 2012. Архивировано 16 мая 2012 года.

Примечания

Ссылки

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