Структура таблицы стилей

Инструкции

Таблица стилей Sass состоит из последовательности инструкций, которые вычисляются для построения итогового CSS. Некоторые инструкции могут содержать блоки, определяемые с помощью { и }, в которых размещаются другие инструкции. Например, правило стиля — это инструкция с блоком. Этот блок содержит другие инструкции, например объявления свойств.

В SCSS инструкции разделяются точками с запятой (которые необязательны, если инструкция содержит блок). В синтаксисе с отступами инструкции разделяются переводами строк. В конце инструкции в синтаксисе с отступами можно поставить точку с запятой, но перевод строки всё равно необходим.

Универсальные инструкции

Эти типы инструкций можно использовать в любом месте таблицы стилей Sass:

• Объявления переменных, например $var: value.
• Управляющие директивы, например @if и @each.
• Правила @error, @warn и @debug.

Инструкции CSS

Эти инструкции создают CSS. Их можно использовать где угодно, кроме @function:

• Правила стилей, например h1 { /* ... */ }.
• Директивы CSS, например @media и @font-face.
• Вызовы миксинов с помощью @include.
• Правило @at-root.

Инструкции верхнего уровня

Эти инструкции можно использовать только на верхнем уровне таблицы стилей или внутри инструкции CSS, расположенной на верхнем уровне:

• Подключение модулей с помощью @use.
• Импорт с помощью @import.
• Определения миксинов с помощью @mixin.
• Определения функций с помощью @function.

Другие инструкции

• Объявления свойств, например width: 100px, можно использовать только внутри правил стилей и некоторых директив CSS.
• Правило @extend можно использовать только внутри правил стилей.

Выражения

Выражение — это всё, что находится справа от объявления свойства или переменной. Каждое выражение возвращает значение. Любое допустимое значение свойства CSS также является выражением Sass, но выражения Sass гораздо мощнее обычных значений CSS. Их передают в качестве аргументов миксинам и функциям, используют для управления потоком выполнения с помощью правила @if и обрабатывают с помощью арифметических операций. Синтаксис выражений Sass называется SassScript.

Литералы

Простейшие выражения представляют собой статические значения:

• Числа, которые могут иметь единицы измерения или не иметь их, например 12 или 100px.
• Строки, которые могут быть заключены в кавычки или не иметь кавычек, например "Helvetica Neue" или bold.
• Цвета, которые можно задавать в шестнадцатеричном формате или по имени, например #c6538c или blue.
• Логические литералы boolean true или false.
• Единственное значение null.
• Списки значений, элементы которых могут разделяться пробелами или запятыми и заключаться в квадратные скобки либо не заключаться в скобки вовсе, например 1.5em 1em 0 2em, Helvetica, Arial, sans-serif или [col1-start].
• Отображения, связывающие значения с ключами, например ("background": red, "foreground": pink).

Операции

Sass определяет синтаксис для ряда операций:

• == и != используются для проверки равенства двух значений.
• +, -, *, / и % имеют обычное математическое значение для чисел; при этом единицы измерения обрабатываются особым образом, как и в научных вычислениях.
• <, <=, > и >= проверяют, больше или меньше одно число другого.
• and, or и not работают как обычные логические операторы. Sass считает любое значение истинным, кроме false и null.
• +, - и / можно использовать для объединения строк.
• ( и ) можно использовать для явного задания порядка выполнения операций.

Другие выражения

• Переменные, например $var.
• Вызовы функций, например nth($list, 1) или var(--main-bg-color). Они могут вызывать функции из основной библиотеки Sass или функции, определённые пользователем, либо компилироваться непосредственно в CSS.
• Специальные функции, например calc(1px + 100%) или url(http://myapp.com/assets/logo.png), имеющие собственные правила разбора.
• Родительский селектор &.
• Значение !important, которое разбирается как строка без кавычек.