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

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

`url()`

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

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

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

@font-face {
    // This is parsed as a normal function call that takes a quoted string.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

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

@font-face {
    // This is parsed as a normal function call that takes an arithmetic
    // expression.
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

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

@font-face {
    // This is parsed as an interpolated special function.
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");

    font-family: "Roboto";
    font-weight: 400;
}
// SASS
$roboto-font-path: "../fonts/roboto"

@font-face
    // This is parsed as a normal function call that takes a quoted string.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2")

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


@font-face
    // This is parsed as a normal function call that takes an arithmetic
    // expression.
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2")

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


@font-face
    // This is parsed as an interpolated special function.
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2")

    font-family: "Roboto"
    font-weight: 400
/* CSS */
@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:...()` и `expression()`

Dart Sass: с версии <1.40.0
LibSass: ✗
Ruby Sass: ✗

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

Dart Sass версии 1.40.0 и более поздние версии обрабатывают calc() как вычисление.

Dart Sass: с версии >=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() как вычисление.

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

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

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

$logo-element: logo-bg;

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

.logo
  background: element(##{$logo-element})
/* CSS */
.logo {
  background: element(#logo-bg);
}

© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/syntax/special-functions

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

url()

element(), progid:...() и expression()

`url()`

`element()`, `progid:...()` и `expression()`