Sass — расширение CSS, которое придает мощи и элегантности этому простому языку. Sass даст вам возможность использовать переменные, вложенные правила, миксины, инлайновые импорты и многое другое, все с полностью совместимым с CSS синтаксисом. Sass помогает сохранять огромные таблицы стилей хорошо организованными, а небольшим стилям работать быстро, особенно с помощью библиотеки стилей Compass.
Для Sass доступно два синтаксиса. Первый, известный как SCSS (Sassy Cascading Style Sheets) и используемый повсюду в этой статье — это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Более того, SCSS понимает большинство хаков в CSS и вендорные синтаксисы, например такой как синтаксис фильтра в старом IE. Этот синтаксис улучшен Sass функционалом описанным ниже. Файлы использующие этот синтаксис имеют .scss расширение.
Второй и более старый синтаксис, также известный как SASS (Syntactically Awesome Style Sheets), дает более сжатую возможность работы с CSS. Он использует отступы вместо скобок, что отделить вложения селекторов и новые строки вместо точек с запятой для разделения свойств. Иногда люди находят такой способ проще для понимания и быстрее для написания, чем SCSS. По факту, такой синтаксис имеет тот же функционал, хотя некоторые из них имеют слегка другой подход. Файлы используемые этот синтаксис имеют расширение .sass.
- Вложенность — SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам
- Переменные — в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву
@for. Или генерировать свойства динамически - Улучшенные математические операции — можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без
calc() - Тригонометрия — SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript
- Директивы
@for,@whileи выражение@if-else— можно писать CSS-код, используя знакомые элементы из других языков - Миксины (примеси) — можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешенное в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов
- Функции — можно создавать определения CSS в виде функций для многократного использования
$blue: #00214D;
.blue {
color: $blue;
}/* CSS */
#A {
color: red;
}
#A #B {
color: green;
}
#A #B #C p {
color: blue;
}
/* SCSS */
#A {
color: red;
#B {
color: green;
#C p {
color: blue;
}
}
}#p {
color: black;
a {
font-weight: bold;
&:hover {
color: red;
}
}
}@mixin flexible {
display: flex;
justify-content: center;
align-items: center;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius; // Chrome и Safari
-moz-border-radius: $radius; // Firefox
-ms-border-radius: $radius; // Internet Explorer
-o-border-radius: $radius; // Opera
border-radius: $radius; // Стандартный CSS
}
.centered-elements {
border: 1px solid gray;
@include flexible;
@include border-radius(10px);
}/* Сложение */
p {
font-size: 10px + 2em; // ОШИБКА!
font-size: 10px + 6px; // 16px
font-size: 10px + 2; // 12px
}
/* Вычитание */
div {
height: 12% - 2%; // 10%
margin: 4rem - 1; // 3rem
}
/* Умножение */
p {
width: 10px * 10px; // ОШИБКА!
width: 10px * 10; // 100px
width: 1px * 5 + 5px; // 10px
width: 5 * (5px + 5px); // 50px
width: 5px + (10px / 2) * 3; // 20px
}
/* Деление */
$var1: 20;
$var2: 4;
p {
top: 16px / 24px; // Отображается без изменений в стандартном CSS
top: (20px / 5px); // Производится деление (но только при использовании скобок)
top: #{$var1} / #{$var2}; // Выводится как обычный CSS-код, деление не выполняется
top: $var1 / $var2; // Деление выполняется
top: random(4) / 5; // Деление выполняется (если использовать в паре с функцией)
top: 2px / 4px + 3px; // Деление выполняется, если добавлена еще одно арифметическое действие
}p {
font: 50px Ari + "al"; // Компилируется в 50px Arial
font: "50px" + Arial; // ОШИБКА!
content: "Рекурсия " + 2013 + " удел небожителей";
}/* Функция if() */
if (true, 1px, 2px) // 1px;
if (false, 1px, 2px) // 2px;
/* Директива @if */
p {
@if $type == tree {
color: green;
} @else if $type == river {
color: blue;
} @else if $type == dirt {
color: brown;
}
}/* Проверка на наличие родительского элемента */
@mixin does-parent-exist {
@if & {
/* Применение голубого цвета родительскому элементу, если он существует */
&:hover {
color: blue;
}
} @else {
/* Родительский элемент отсутствует, применение голубого цвета к ссылкам */
a {
color: blue;
}
}
}@for $i from 1 through 5 {
.definition-#{$i} { width: 10px * $i; }
}@each $animal in platypus, lion, sheep, dove {
.#{$animal}-icon {
background-image: url("/images/#{$animal}.png")
}
}$index: 5;
@while $index > 0 {
.element-#{$index} { width: 10px * $index; }
$index: $index - 1;
}@function three-hundred-px() {
@return 300px;
}
@function double($width) {
@return $width * 2;
}
.name {
width: three-hundred-px();
height: double(20px);
border: 1px solid gray;
display: block;
position: absolute;
}