特殊函数

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

url()url() 链接

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

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

游乐场

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;
}
游乐场

Sass 语法

$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 输出

@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() 链接

兼容性 (calc())
Dart Sass
自 <1.40.0
LibSass
✗
Ruby Sass
✗

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

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

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

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

1.31.0 到 1.40.0 之间的 Dart Sass 版本将 clamp() 解析为类似于 element() 的特殊语法函数。

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

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

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

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

游乐场

SCSS 语法

$logo-element: logo-bg;

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

Sass 语法

$logo-element: logo-bg

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

CSS 输出

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