Sass (Sass)
| Sass | |
|---|---|
 | |
| Тип | Язык описания стилей, препроцессор, язык программирования и язык, использующий отступы[вд] |
| Операционная система | кроссплатформенность |
| Первый выпуск | 28 ноября 2006 |
| Последняя версия | |
| Лицензия | лицензия MIT |
| Сайт | 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;
}
Примечания
[править | править код]Литература
[править | править код]- 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 года.
