StringOptionsWithoutImporter<sync>

可以傳遞給 compileStringcompileStringAsync 的選項。

如果未傳遞 importer 欄位,則入口點檔案可以載入相對於其本身的檔案,如果將 file:// URL 傳遞給 url 欄位。

類型參數

層級

輸入

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));
}
}
syntax?: Syntax

用於解析入口點樣式表的 Syntax 

預設

'scss'

url?: URL

入口點樣式表的標準 URL 

相對載入的 URL 最初會根據 url 解析為相對位置,如果它是 file:// URL,則會解析為磁碟上的檔案。如果無法解析為磁碟上的檔案,則會傳遞給 importersloadPaths

輸出

charset?: boolean
相容性
Dart Sass
自 1.54.0 起
Node Sass

如果為 true,編譯器可能會在輸出非 ASCII CSS 時,在前面加上 @charset "UTF-8"; 或 U+FEFF(位元組順序標記)。

如果為 false,編譯器絕不會發出這些位元組序列。當在 HTML <style> 標籤中串接或嵌入時,這是理想的選擇。(輸出仍會是 UTF-8。)

預設值

true

sourceMap?: 布林值

Sass 是否應產生 source map。如果產生,source map 將會以 sourceMap 的形式提供。

⚠️ 注意!

Sass 沒有自動將 sourceMappingURL 註解加入產生的 CSS 中。呼叫者必須自行加入,因為呼叫者完全知道 CSS 和 source map 的相對位置,以及它們將如何提供給 瀏覽器。

預設值

false

sourceMapIncludeSources?: 布林值

Sass 是否應在產生的 source map 中包含來源。

如果 sourceMapfalse,此選項無效。

預設值

false

style?: OutputStyle

編譯的 CSSOutputStyle

範例

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?: Record<string, CustomFunction<sync>>

所有樣式表中可用的其他內建 Sass 函數。此選項會接受一個物件,其金鑰為 Sass 函數簽章,例如您會為 @function rule 編寫的簽章,而其值為 CustomFunction

函數會傳遞 Value 的子類別,且必須傳回相同的類別。如果傳回值包含 SassCalculation,它們會在傳回之前簡化。

撰寫自訂函數時,務必讓它們盡可能地對使用者友善,且盡可能接近 Sass 核心函數設定的標準。一些不錯的準則包括

  • 使用 Value.assert* 方法,例如 assertString,將未分型的 Value 物件轉換為更具體的型別。對於直接作為引數傳遞的值,請同時傳入引數名稱。這可確保使用者在傳入錯誤型別至您的函式時,會收到良好的錯誤訊息 

  • 個別類別可能會有更具體的 assert* 方法,例如 assertInt,應盡可能使用此方法 

  • 在 Sass 中,每個值都算作一個清單。您不應嘗試偵測 SassList 型別,而應使用 asList 將所有值視為 清單。

  • 在操作具有元資料(逗號與空格分隔、有括號與無括號、有引號與無引號、單位)的清單、字串和數字等值時,輸出元資料應與輸入 元資料相符。

  • 在有疑問時,清單應預設為逗號分隔,字串應預設為有引號,而數字應預設為 無單位。

  • 在 Sass 中,清單和字串使用以 1 為基底的索引,並使用負索引從值的結尾索引。函式應遵循這些慣例。 sassIndexToListIndexsassIndexToStringIndex 可用於自動執行此操作 

  • Sass 中的字串索引是指 Unicode 碼點,而 JavaScript 字串索引是指 UTF-16 碼元。例如,字元 U+1F60A SMILING FACE WITH SMILING EYES 是單一的 Unicode 碼點,但在 UTF-16 中表示為兩個碼元(0xD83D0xDE0A)。因此,在 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?: (NodePackageImporter | Importer<sync> | FileImporter<sync>)[]

自訂匯入器,控制 Sass 如何解析載入規則,例如 @use@import

載入是透過以下順序嘗試解析

如果以上方式都沒有傳回 Sass 檔案,載入就會失敗,而 Sass 會擲回 錯誤。

訊息

alertAscii?: boolean

如果為 true,編譯器將在錯誤和警告訊息中僅使用 ASCII 字元。否則,它可能會使用非 ASCII Unicode 字元。

預設值

false

alertColor?: boolean

如果為 true,編譯器將在錯誤和警告訊息中使用 ANSI 顏色跳脫碼。如果為 false,它將不會使用這些跳脫碼。如果未定義,編譯器將根據使用者是否使用互動式終端來決定是否使用顏色。

logger?: Logger

用於處理 Sass 警告和/或偵錯訊息的物件。

預設情況下,Sass 會將警告和偵錯訊息發送到標準錯誤,但如果設定 warndebug,則會呼叫它們。

特殊值 silent 可用於輕鬆停用所有訊息。

quietDeps?: boolean

如果此選項設定為 true,Sass 將不會列印由相依項造成的警告。「相依項」定義為透過 loadPathsimporters 載入的任何檔案。相對於進入點匯入的樣式表不被視為相依項。

這對於停用無法自行修復的棄用警告很有用。但是,請同時通知相依項的棄用,以便它們可以盡快修復!

⚠️ 注意!

如果 compileStringcompileStringAsync 在沒有 url 的情況下被呼叫,它載入的所有樣式表都將被視為依賴項。由於它沒有自己的路徑,因此它載入的所有內容都來自載入路徑,而不是相對 匯入。

預設值

false

verbose?: boolean

預設情況下,Dart Sass 每個編譯只會列印同一個棄用警告的五個實例,以避免使用者的主控台訊息過多。如果你將 verbose 設為 true,它將列印它遇到的每個棄用警告 

預設值

false