特殊函数

CSS 定义了许多函数，其中大多数都可以与 Sass 的正常函数语法配合使用。它们被解析为函数调用，解析为 纯 CSS 函数，并按原样编译为 CSS。不过，也有一些例外，它们具有特殊的语法，不能仅仅解析为 SassScript 表达式。所有特殊函数调用都返回 不带引号的字符串。

if()if() permalink

兼容性 (calc()):
Dart Sass
since 1.95.0
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass 和 Dart Sass 的某些版本会将 if() 解析为签名为 if($condition, $if-true, $if-false) 的 Sass 函数。如果 $condition 为 真实的，则此函数返回 $if-true；否则，它返回 $if-false。此函数具有特殊的语法，可以避免执行与 $condition 不匹配的分支语句。

¥LibSass, Ruby Sass, and versions of Dart Sass parse if() as a Sass function with the signature if($condition, $if-true, $if-false). If $condition is truthy, this function returns $if-true; otherwise, it returns $if-false. This function has special syntax that avoids evaluating the branch that doesn’t match $condition.

Dart Sass 1.95.0 及更高版本会按照以下说明解析 if()。Dart Sass 3.0.0 之前的版本仍然支持旧的 if() 语法，但它已被弃用。参见 /d/if-function。

¥Dart Sass versions 1.95.0 and later parse if() as described below. Dart Sass versions before 3.0.0 still support the old if() syntax, but it’s considered deprecated. See /d/if-function.

Sass 支持 CSS if() 函数，并新增了一项重要功能：sass(...) 条件接受一个 SassScript 表达式，并判断该表达式的计算结果是否为 真实的 值。仅包含 sass(...) 条件（以及可选的 else）的 if() 函数将完全由 Sass 计算，并返回相应的值。

¥Sass supports the CSS if() function with one important addition: the sass(...) condition, which takes a SassScript expression and matches if that expression evaluates to a truthy value. An if() function that contains only sass(...) conditions (and optionally else) will be evaluated entirely by Sass, and return the corresponding value.

在 if() 函数的条件语句中，SassScript 只能出现在 sass(...) 条件语句或 插值法 条件语句中。另一方面，这些值是普通的 SassScript 表达式，无需任何特殊封装。只有条件匹配的值才会被求值，因此其他值可能引用不存在的变量或调用会出错的函数。

¥SassScript in an if() function’s conditions is only allowed within the sass(...) condition or in interpolation. The values, on the other hand, are normal SassScript expressions and don’t need any special wrapping. Only the value whose condition matches will be evaluted, so the other values may refer to variables that don’t exist or call functions that would error.

如果纯 Sass if() 中没有任何条件匹配，则返回 null。

¥If no conditions in an pure-Sass if() match, it returns null.

Playground

SCSS Syntax

@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
Playground

Sass Syntax

@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 会将整个结果作为字符串返回。

¥sass(...) conditions can also be combined with normal CSS conditions. The Sass conditions will be evaluated by Sass, but if any CSS conditions are left Sass will return the whole result as a string.

Playground

SCSS Syntax

$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
Playground

Sass Syntax

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

url() 函数 在 CSS 中常用，但其语法与其他函数不同：它可以采用带引号或不带引号的 URL。由于不带引号的 URL 不是有效的 SassScript 表达式，因此 Sass 需要特殊的逻辑来解析它。

¥The url() function is commonly used in CSS, but its syntax is different than other functions: it can take either a quoted or unquoted URL. Because an unquoted URL isn’t a valid SassScript expression, Sass needs special logic to parse it.

如果 url() 的参数是有效的不带引号的 URL，Sass 会按原样解析它，尽管 插值法 也可用于注入 SassScript 值。如果它不是有效的不带引号的 URL（例如，如果它包含 变量 或 函数调用），则会将其解析为普通的 纯 CSS 函数调用。

¥If the url()’s argument is a valid unquoted URL, Sass parses it as-is, although interpolation may also be used to inject SassScript values. If it’s not a valid unquoted URL—for example, if it contains variables or function calls—it’s parsed as a normal plain CSS function call.

Playground

SCSS Syntax

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

Sass Syntax

$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 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:...() 和 expression()element()、progid:…() 和 expression() permalink

¥element(), progid:...(), and expression()

兼容性 (calc()):
Dart Sass
since 1.40.0
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass 和 1.40.0 之前的 Dart Sass 版本将 calc() 解析为特殊语法函数，如 element()。

¥LibSass, Ruby Sass, and versions of Dart Sass prior to 1.40.0 parse calc() as special syntactic function like element().

Dart Sass 版本 1.40.0 及更高版本将 calc() 解析为 计算。

¥Dart Sass versions 1.40.0 and later parse calc() as a calculation.

兼容性 (clamp()):
Dart Sass
since >=1.31.0 <1.40.0
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass 和 1.31.0 之前的 Dart Sass 版本将 clamp() 解析为 纯 CSS 函数，而不是支持其中的特殊语法。

¥LibSass, Ruby Sass, and versions of Dart Sass prior to 1.31.0 parse clamp() as a plain CSS function rather than supporting special syntax within it.

1.31.0 和 1.40.0 之间的 Dart Sass 版本将 clamp() 解析为特殊语法函数，如 element()。

¥Dart Sass versions between 1.31.0 and 1.40.0 parse clamp() as special syntactic function like element().

Dart Sass 版本 1.40.0 及更高版本将 clamp() 解析为 计算。

¥Dart Sass versions 1.40.0 and later parse clamp() as a calculation.

element() 函数是在 CSS 规范中定义的，由于它的 ID 可以解析为颜色，因此需要特殊解析。

¥The element() function is defined in the CSS spec, and because its IDs could be parsed as colors, they need special parsing.

expression() 和以 progid: 开头的函数是使用非标准语法的旧版 Internet Explorer 功能。尽管最新的浏览器不再支持它们，但 Sass 仍继续解析它们以实现向后兼容性。

¥expression() and functions beginning with progid: are legacy Internet Explorer features that use non-standard syntax. Although they’re no longer supported by recent browsers, Sass continues to parse them for backwards compatibility.

Sass 允许在这些函数调用中使用任何文本，包括嵌套括号。除了 插值法 可用于注入动态值之外，没有任何内容被解释为 SassScript 表达式。

¥Sass allows any text in these function calls, including nested parentheses. Nothing is interpreted as a SassScript expression, with the exception that interpolation can be used to inject dynamic values.

Playground

SCSS Syntax

$logo-element: logo-bg;

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

Sass Syntax

$logo-element: logo-bg

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

CSS Output

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