特殊函数

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

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