CSS 定义了很多函数,其中大部分都可以与 Sass 的普通函数语法一起正常工作。 它们被解析为函数调用,解析为 纯 CSS 函数,并按原样编译为 CSS。 不过也有一些例外,它们具有特殊的语法,不能仅作为 SassScript 表达式 进行解析。 所有特殊函数调用都会返回 未加引号的字符串。
url()
url()
函数 在 CSS 中很常用,但它的语法与其他函数不同:它可以接受 引用的 or 未引用的 URL。 因为不带引号的 URL 不是有效的 SassScript 表达式,Sass 需要特殊的逻辑来解析它。
如果 url()
的参数是有效的不带引号的 URL,Sass 会按原样解析它,尽管 interpolation 也可用于注入 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:...()
, and expression()
since <1.40.0
| LibSass ✗ | Ruby Sass ✗LibSass、Ruby Sass 和 Dart Sass 1.40.0 之前的版本将 calc() 解析为特殊的语法函数,如 element()。
Dart Sass 1.40.0 及更高版本将 calc() 解析为计算。
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 可用于注入动态值除外。
$logo-element: logo-bg;
.logo {
background: element(##{$logo-element});
}