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

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;
}

Sass 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

CSS Output

@font-face {
  src: url("../fonts/roboto/Roboto-Thin.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 100;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Light.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 300;
}
@font-face {
  src: url(../fonts/roboto/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
✗

LibSass, Ruby Sass и версии Dart Sass до 1.40.0 анализируют calc() как специальную синтаксическую функцию, такую как element().

Dart Sass 1.40.0 версии и более поздних анализирует calc() как calculation.

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

LibSass, Ruby Sass и версии Dart Sass до 1.31.0 анализируют clamp() как простую функцию CSS, а не поддерживают в ней специальный синтаксис.

Версии Dart Sass между 1.31.0 и 1.40.0 анализируют clamp() как специальную синтаксическую функцию, такую как element().

Dart Sass 1.40.0 версии и более поздних анализирует clamp() как calculation.

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

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

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

SCSS Syntax

$logo-element: logo-bg;

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

Sass Syntax

$logo-element: logo-bg

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

CSS Output

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