Sass (, «синтаксически прекрасные таблицы стилей», также само слово sass переводится как «дерзость, нахальство») — метаязык на основе 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; }
Примечания
Литература
Ссылки Официальный веб-сайт Sass Документация на русском языке
Категория:Языки разметки Категория:Языки стилей Категория:Программное обеспечение с лицензией MIT Категория:Ruby