StringOptionsWithoutImporter<sync>
類型參數
-
sync extends "sync" | "async"
這讓 TypeScript 檢查器驗證非同步 Importer、FileImporter 和 CustomFunction 未傳遞給 compile 或 compileString。
層級
- Options<sync>
- StringOptionsWithoutImporter
輸入
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
Optional
url
輸出
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 是否應產生 source map。如果產生,source map 將會以 sourceMap 的形式提供。
⚠️ 注意!
Sass 沒有自動將 sourceMappingURL
註解加入產生的 CSS 中。呼叫者必須自行加入,因為呼叫者完全知道 CSS 和 source map 的相對位置,以及它們將如何提供給 瀏覽器。
預設值
false
Optional
sourceMapIncludeSources
Optional
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}
外掛程式
Optional
functions
所有樣式表中可用的其他內建 Sass 函數。此選項會接受一個物件,其金鑰為 Sass 函數簽章,例如您會為 @function rule
編寫的簽章,而其值為 CustomFunction。
函數會傳遞 Value 的子類別,且必須傳回相同的類別。如果傳回值包含 SassCalculation,它們會在傳回之前簡化。
撰寫自訂函數時,務必讓它們盡可能地對使用者友善,且盡可能接近 Sass 核心函數設定的標準。一些不錯的準則包括
使用
Value.assert*
方法,例如 assertString,將未分型的Value
物件轉換為更具體的型別。對於直接作為引數傳遞的值,請同時傳入引數名稱。這可確保使用者在傳入錯誤型別至您的函式時,會收到良好的錯誤訊息 。個別類別可能會有更具體的
assert*
方法,例如 assertInt,應盡可能使用此方法 。在 Sass 中,每個值都算作一個清單。您不應嘗試偵測 SassList 型別,而應使用 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));
}
}
});
Optional
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 欄位,則入口點檔案可以載入相對於其本身的檔案,如果將
file://
URL 傳遞給 url 欄位。