Lzh on GitHub

特殊函数

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

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

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

element()、progid:...() 和 expression()

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

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

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

$logo-element: logo-bg;

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