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

if()

Совместимость (calc()):

Dart Sass

начиная с версии 1.95.0

LibSass

✗

Ruby Sass

✗

➤

Sass поддерживает функцию CSS if() с одним важным дополнением: условие sass(...) принимает выражение SassScript и считается совпавшим, если выражение вычисляется в истинное значение. Функция if(), содержащая только условия sass(...) (и, при необходимости, else), будет полностью вычислена Sass и вернёт соответствующее значение.

SassScript в условиях функции if() допускается только внутри условия sass(...) или в интерполяции. Значения же представляют собой обычные выражения SassScript и не требуют специального обрамления. Будет вычислено только значение, условие которого совпало, поэтому в остальных значениях можно ссылаться на несуществующие переменные или вызывать функции, которые завершились бы ошибкой.

Если ни одно условие в чисто Sass-функции if() не совпадает, она возвращает null.

@use 'sass:meta';

$hungry: true;
@debug if(sass($hungry): breakfast burrito; else: cereal); // breakfast burrito

// You can use CSS boolean expressions with sass(...) conditions.
@debug if(not sass($hungry): skip lunch); // null

// Only the matching branch is evaluated.
@debug if(sass(meta.variable-exists("thirsty")): thirsty; else: hungry); // hungry

// SASS
@use 'sass:meta'

$hungry: true
@debug if(sass($hungry): breakfast burrito; else: cereal)  // breakfast burrito

// You can use CSS boolean expressions with sass(...) conditions.
@debug if(not sass($hungry): skip lunch)  // null

// Only the matching branch is evaluated.
@debug if(sass(meta.variable-exists("thirsty")): thirsty; else: hungry)  // hungry

Условия sass(...) также можно сочетать с обычными условиями CSS. Условия Sass будут вычислены Sass, но если останутся условия CSS, Sass вернёт весь результат в виде строки.

$support-widescreen: true;
@debug if(
  sass($support-widescreen) and media(width >= 3000px): big;
  else: small
); // if(media(width >= 3000px): big; else: small)

// If Sass conditions mean a branch will never match (or always match), Sass
// eagerly removes that branch and returns the final value if possible.
$support-widescreen: false;
@debug if(
  sass($support-widescreen) and media(width >= 3000px): big;
  else: small
); // small

// SASS
$support-widescreen: true
@debug if(
  sass($support-widescreen) and media(width >= 3000px): big;
  else: small
)  // if(media(width >= 3000px): big; else: small)

// If Sass conditions mean a branch will never match (or always match), Sass
// eagerly removes that branch and returns the final value if possible.
$support-widescreen: false
@debug if(
  sass($support-widescreen) and media(width >= 3000px): big;
  else: small
)  // small

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()

Совместимость (calc()):

Dart Sass

начиная с версии 1.40.0

LibSass

✗

Ruby Sass

✗

➤

Совместимость (clamp()):

Dart Sass

начиная с >=1.31.0 и до <1.40.0

LibSass

✗

Ruby Sass

✗

➤

Функция 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);
}