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

Как и CSS, большинство таблиц стилей Sass в основном состоят из правил стилей, содержащих объявления свойств. Но таблицы стилей Sass имеют гораздо больше функций, которые могут существовать вместе с ними.

Конструкции permalinkКонструкции

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

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

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

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

CSS конструкции permalinkCSS конструкции

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

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

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

Прочие конструкции permalinkПрочие конструкции

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

Выражения permalinkВыражения

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

Литералы permalinkЛитералы

Самые простые выражения просто представляют статические значения:

  • Числа, , которые могут иметь или не иметь единиц, таких как 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).

Операции permalinkОперации

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

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

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

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