StringOptionsWithImporter<sync>
類型參數
-
sync extends "sync" | "async"
這讓 TypeScript 檢查器可以驗證非同步 Importer、FileImporter 和 CustomFunction 沒有傳遞給 compile 或 compileString。
階層
- StringOptionsWithoutImporter<sync>
- StringOptionsWithImporter
輸入
importer
Optional
loadPaths
尋找由規則載入的樣式表的路徑,例如 @use
和 @import
。
載入路徑 loadPath
等於下列 FileImporter
{
findFileUrl(url) {
// Load paths only support relative URLs.
if (/^[a-z]+:/i.test(url)) return null;
return new URL(url, pathToFileURL(loadPath));
}
}
Optional
syntax
url
入口樣式表的標準 URL。如果這與 importer 一起傳遞,它用於解析入口樣式表中的相對載入 。
輸出
Optional
charset
- Dart Sass
- 自 1.54.0
- Node Sass
- ✗
如果為 true
,編譯器可能會在輸出非 ASCII CSS 時加上 @charset "UTF-8";
或 U+FEFF(位元組順序標記)。
如果為 false
,編譯器永遠不會發出這些位元組序列。在串接或嵌入 HTML <style>
標籤時,這是理想的選擇。(輸出仍會是 UTF-8。)
預設值
true
Optional
sourceMap
Sass 是否應產生原始碼對應。如果產生,原始碼對應將可用於 sourceMap。
⚠️ 注意!
Sass 不會自動將 sourceMappingURL
註解新增到產生的 CSS 中。呼叫者必須自行執行此操作,因為呼叫者完全知道 CSS 和原始碼對應將如何彼此關聯,以及如何將它們提供給 瀏覽器。
預設值
false
選用
sourceMapIncludeSources
選用
style
已編譯 CSS 的 OutputStyle。
範例
const source = `
h1 {
font-size: 40px;
code {
font-face: Roboto Mono;
}
}`;
let result = sass.compileString(source, {style: "expanded"});
console.log(result.css.toString());
// h1 {
// font-size: 40px;
// }
// h1 code {
// font-face: Roboto Mono;
// }
result = sass.compileString(source, {style: "compressed"})
console.log(result.css.toString());
// h1{font-size:40px}h1 code{font-face:Roboto Mono}
外掛程式
選用
functions
所有樣式表中可用的其他內建 Sass 函數。此選項會採用一個物件,其金鑰是 Sass 函數簽章,就像您為 @function 規則
所寫的,而其值是 自訂函數。
函數會傳遞 值 的子類別,且必須傳回相同類別。如果傳回值包含 Sass 計算,則會在傳回之前將其簡化。
在撰寫自訂函數時,務必讓它們盡可能地對使用者友善,且盡可能接近 Sass 核心函數所設定的標準。以下是一些不錯的準則
使用
Value.assert*
方法,例如 assertString,將未輸入類型的值
物件轉換為更具體的類型。對於直接作為引數傳遞的值,也請傳入引數名稱。這可確保使用者在傳入錯誤的類型至您的函數時,會收到良好的錯誤訊息。個別類別可能會有更具體的
assert*
方法,例如 assertInt,應盡可能使用這些方法。在 Sass 中,每個值都算是一個清單。您不應嘗試偵測 Sass 清單 類型,而應使用 asList 將所有值視為清單。
在處理具有元資料(逗號與空格分隔、括號與非括號、引號與非引號、單位)的清單、字串和數字等值時,輸出元資料應與輸入元資料相符 。
如有疑問,清單應預設為逗號分隔,字串應預設為帶引號,數字應預設為 無單位。
在 Sass 中,清單和字串使用從 1 開始的索引,並使用負索引從值的結尾開始索引。函式應遵循這些慣例。 sassIndexToListIndex 和 sassIndexToStringIndex 可用於自動執行此操作 。
Sass 中的字串索引指的是 Unicode 編碼點,而 JavaScript 字串索引指的是 UTF-16 編碼單位。例如,字元 U+1F60A SMILING FACE WITH SMILING EYES 是單一的 Unicode 編碼點,但在 UTF-16 中表示為兩個編碼單位(
0xD83D
和0xDE0A
)。因此,在 JavaScript 中,"a😊b".charCodeAt(1)
會傳回0xD83D
,而在 Sass 中,str-slice("a😊b", 1, 1)
會傳回"😊"
。函式應遵循 Sass 的慣例。 sassIndexToStringIndex 可用於自動執行此操作,而 sassLength getter 可用於存取字串在編碼點中的長度 。
範例
sass.compileString(`
h1 {
font-size: pow(2, 5) * 1px;
}`, {
functions: {
// Note: in real code, you should use `math.pow()` from the built-in
// `sass:math` module.
'pow($base, $exponent)': function(args) {
const base = args[0].assertNumber('base').assertNoUnits('base');
const exponent =
args[1].assertNumber('exponent').assertNoUnits('exponent');
return new sass.SassNumber(Math.pow(base.value, exponent.value));
}
}
});
可選
importers
自訂導入器,用於控制 Sass 如何解析來自規則的載入,例如 @use
和 @import
。
載入透過嘗試,依序
用於載入目前樣式表的導入器,載入的 URL 相對於目前樣式表的正規 URL 解析。
依序,Importer、FileImporter 或 NodePackageImporter 中的 importers。
依序,loadPaths 中的每個載入路徑。
如果這些都沒有傳回 Sass 檔案,載入會失敗,而 Sass 會擲回 錯誤。
訊息
Optional
alertAscii
如果這是 true
,編譯器將在錯誤和警告訊息中僅使用 ASCII 字元。否則,它可能會使用非 ASCII Unicode 字元。
預設值
false
Optional
alertColor
如果這是 true
,編譯器將在錯誤和警告訊息中使用 ANSI 顏色跳脫碼。如果是 false
,它將不會使用這些。如果未定義,編譯器將根據使用者是否使用互動式終端來決定是否使用顏色。
Optional
logger
Optional
quietDeps
如果此選項設定為 true
,Sass 將不會列印由相依項產生的警告。相依項定義為透過 loadPaths 或 importers 載入的任何檔案。相對於進入點匯入的樣式表不被視為相依項。
這對於靜音您無法自行修復的棄用警告很有用。但是,請也通知您的相依項有關棄用的資訊,以便它們可以盡快修復!
⚠️ 注意!
如果在未指定 compileString 或 compileStringAsync 的 url 的情況下呼叫,則它載入的所有樣式表都將被視為相依性。由於它沒有自己的路徑,因此它載入的所有內容都來自載入路徑,而不是相對 匯入。
預設值
false
Optional
verbose
預設情況下,Dart Sass 每個編譯只會列印同一個不建議使用的警告五次,以避免使用者的主控台訊息過多。如果您將 verbose
設定為 true
,它將列印它遇到的每個不建議使用的警告 。
預設值
false
可以傳遞給 compileString 或 compileStringAsync 的選項。
如果傳遞了 importer 欄位,則 entrypoint 檔案會使用它來載入相對於它本身的檔案,而且 url 欄位是 必要的。