特殊函数

CSS 定义了许多函数，其中大多数都可以很好地使用 Sass 的普通函数语法。它们被解析为函数调用，解析为普通 CSS 函数，并按原样编译为 CSS。不过，有一些例外情况，它们具有特殊的语法，无法仅作为 SassScript 表达式 解析。所有特殊函数调用都返回不带引号的字符串。

url()url() permalink

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

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

Playground

SCSS Syntax

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

@font-face {
    // 这被解析为一个接受带引号字符串的普通函数调用。
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

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

@font-face {
    // 这被解析为一个接受算术表达式的普通函数调用。
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

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

@font-face {
    // 这被解析为一个插值特殊函数。
    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
    // 这被解析为一个接受带引号字符串的普通函数调用。
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2")

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


@font-face
    // 这被解析为一个接受算术表达式的普通函数调用。
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2")

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


@font-face
    // 这被解析为一个插值特殊函数。
    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

Compatibility (calc()):
Dart Sass
since <1.40.0
LibSass
✗
Ruby Sass
✗

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

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

Compatibility (clamp()):
Dart Sass
since >=1.31.0 <1.40.0
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass 和 1.31.0 之前的 Dart Sass 版本将 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 表达式，唯一的例外是可以使用插值注入动态值。

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