Sass

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

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

Имеет два синтаксиса:

  • 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; 
}

Примечания[править | править код]

  1. Release Dart Sass 1.69.5. Дата обращения: 30 ноября 2023. Архивировано 30 октября 2023 года.

Литература[править | править код]

  • 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). Архивировано из оригинала 2 апреля 2014 года.

Ссылки[править | править код]