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

Определения

Таблица стилей 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.
• Булевы литералы 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, которое анализируется как необрамлённая строка.