Специальные функции

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

url() permalinkurl()

Функция url() обычно используется в CSS, но ее синтаксис отличается от других функций: она может принимать либо цитируемый, либо URL без кавычек. Поскольку URL-адрес без кавычек не является допустимым выражением SassScript, Sass требует специальной логики для его анализа.

Если аргумент url() является допустимым URL без кавычек, Sass анализирует его как есть, хотя интерполяция также может использоваться для вставки значений SassScript. Если это недействительный URL без кавычек - например, если он содержит переменные или [][функции вызова] — он анализируется как обычный простой вызов функции CSS.

SCSS Syntax

$roboto-font-path: "../fonts/roboto";

@font-face {
    // Это анализируется как обычный вызов функции, который принимает строку в кавычках.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

@font-face {
    // Это анализируется как обычный вызов функции, который принимает арифметическое выражение.
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 300;
}

@font-face {
    // Это анализируется как интерполированная специальная функция.
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");

    font-family: "Roboto";
    font-weight: 400;
}

element(), progid:…(), and expression() permalinkelement(), progid:...(), and expression()

Совместимость (calc()):
Dart Sass
since <1.40.0
LibSass
✗
Ruby Sass
✗
Совместимость (clamp()):
Dart Sass
since >=1.31.0 <1.40.0
LibSass
✗
Ruby Sass
✗

Функция element() определена в спецификации CSS, и поскольку ее идентификаторы могут быть проанализированы как цвета, они нуждаются в специальном анализе.

expression() и функции, начинающиеся с progid: являются устаревшими функциями Internet Explorer, которые используют нестандартный синтаксис. Хотя последние версии браузеров больше не поддерживают их, Sass продолжает анализировать их на предмет обратной совместимости.

Sass допускает любой текст в этих вызовах функций, включая вложенные круглые скобки. Ничто не интерпретируется как выражение SassScript, за исключением того, что интерполяция может использоваться для вставки динамических значений.

SCSS Syntax

$logo-element: logo-bg;

.logo {
  background: element(##{$logo-element});
}