特殊函式
CSS 定義了許多函式，其中大多數都可以與 Sass 的一般函式語法一起正常使用。它們會被解析為函式呼叫，解析為純 CSS 函式，並按原樣編譯為 CSS。不過，也有一些例外情況，它們具有特殊的語法，不能僅僅被解析為SassScript 運算式。所有特殊函式呼叫都會返回未加引號的字串。
url()url() 永久連結
url() 函式 常用於 CSS 中，但其語法與其他函式不同：它可以接受加引號或未加引號的網址。因為未加引號的網址不是有效的 SassScript 運算式，所以 Sass 需要特殊的邏輯來解析它。
如果 url() 的參數是有效的未加引號網址，Sass 會按原樣解析它，但也可以使用插值來插入 SassScript 值。如果它不是有效的未加引號網址，例如，如果它包含變數或函式呼叫，則會將其解析為一般的純 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() 永久連結
- Dart Sass
- 自 <1.40.0 版本起
- LibSass
- ✗
- Ruby Sass
- ✗
LibSass、Ruby Sass 和 1.40.0 之前的 Dart Sass 版本會將 calc() 解析為特殊的語法函數，類似於 element()。
1.40.0 及之後版本的 Dart Sass 將 calc() 解析為計算。
- 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 表達式。