特殊函数 Special Functions

它们被解析为函数调用,解析为纯 CSS 函数,并按原样编译为 CSS。 不过也有一些例外,它们的特殊语法不能仅作为 SassScript 表达式进行解析。 所有特殊函数调用都返回不带引号的字符串。

CSS 定义了很多函数,其中大部分都可以与 Sass 的普通函数语法一起正常工作。 它们被解析为函数调用,解析为 纯 CSS 函数,并按原样编译为 CSS。 不过也有一些例外,它们具有特殊的语法,不能仅作为 SassScript 表达式 进行解析。 所有特殊函数调用都会返回 未加引号的字符串

url()

url() 函数 在 CSS 中很常用,但它的语法与其他函数不同:它可以接受 引用的 or 未引用的 URL。 因为不带引号的 URL 不是有效的 SassScript 表达式,Sass 需要特殊的逻辑来解析它。

如果 url() 的参数是有效的不带引号的 URL,Sass 会按原样解析它,尽管 interpolation 也可用于注入 SassScript 值 . 如果它不是有效的未加引号的 URL——例如,如果它包含 变量函数调用——它被解析为一个普通的 纯 CSS 函数调用

scss
Scss
scss
$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;
}

element(), 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() 解析为计算。

兼容性 (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() 解析为计算。

element() 函数在 CSS 规范中定义,并且由于其 ID 可以解析为颜色,因此它们 需要特殊解析。

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

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

scss
Scss
scss
$logo-element: logo-bg;

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