Options<sync>

compilecompileAsynccompileString、またはcompileStringAsyncに渡すことができるオプション。

型パラメーター

階層

入力

loadPaths?: string[]

@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));
}
}

出力

charset?: boolean
互換性
Dart Sass
1.54.0以降
Node Sass

trueの場合、コンパイラーは非-ASCII CSSを出力する場合、@charset "UTF-8";またはU+FEFF(バイトオーダーマーク)を先頭に付加する場合があります。

falseの場合、コンパイラーはこれらのバイトシーケンスを決して出力しません。これは、HTML <style>タグで連結または埋め込む場合に理想的です。(出力は依然としてUTF-8になります。)

デフォルト値

true

sourceMap?: boolean

Sassがソースマップを生成するかどうか。生成する場合、ソースマップはsourceMapとして利用可能になります。

⚠️ 注意!

Sassは、生成されたCSSsourceMappingURLコメントを自動的に追加しません。呼び出し元がCSSとソースマップが互いに相対的にどこに存在し、ブラウザーにどのように提供されるかを完全に把握しているため、これを行うのは呼び出し元の責任です。

デフォルト値

false

sourceMapIncludeSources?: boolean

Sassが生成されたソースマップにソースを含めるかどうか。

このオプションは、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関数。このオプションは、@function ruleに記述するようなSass関数シグネチャをキーとし、値がCustomFunctionであるオブジェクトを受け取ります。

関数には Value のサブクラスが渡され、同じものを返す必要があります。戻り値に SassCalculation が含まれている場合、返される前に簡略化されます。

カスタム関数を作成する際は、ユーザーフレンドリーであること、および Sass のコア関数で設定された標準に可能な限り近いものにすることが重要です。従うべき良いガイドラインには、以下のようなものが含まれます。

  • assertString のような Value.assert* メソッドを使用して、型付けされていない Value オブジェクトをより具体的な型にキャストします。引数として直接渡された値については、引数名も渡します。これにより、ユーザーが関数に間違った型を渡した場合に、適切なエラーメッセージが表示されるようになります。

  • 個々のクラスには、assertInt のように、より具体的な assert* メソッドがある場合があります。可能な場合はこれらを使用する必要があります。

  • Sass では、すべての値がリストとして扱われます。SassList 型を検出するのではなく、asList を使用して、すべての値をリストとして扱う必要があります。

  • リスト、文字列、およびメタデータ(カンマ区切りかスペース区切りか、括弧付きか括弧なしか、引用符付きか引用符なしか、単位)を持つ数値などの値を操作する場合、出力メタデータは入力メタデータと一致する必要があります。

  • 迷った場合は、リストはカンマ区切り、文字列は引用符付き、数値は単位なしをデフォルトにする必要があります。

  • Sass では、リストと文字列は 1 から始まるインデックスを使用し、負のインデックスは値の末尾からインデックス付けします。関数はこれらの規則に従う必要があります。sassIndexToListIndex および sassIndexToStringIndex を使用すると、これを自動的に行うことができます。

  • Sass の文字列インデックスは Unicode コードポイントを参照しますが、JavaScript の文字列インデックスは UTF-16 コードユニットを参照します。たとえば、文字 U+1F60A SMILING FACE WITH SMILING EYES は単一の Unicode コードポイントですが、UTF-16 では 2 つのコードユニット(0xD83D および 0xDE0A)として表されます。したがって、JavaScript では "a😊b".charCodeAt(1)0xD83D を返しますが、Sass では str-slice("a😊b", 1, 1)"😊" を返します。関数は Sass の規則に従う必要があります。sassIndexToStringIndex を使用すると、これを自動的に行うことができます。また、sassLength ゲッターを使用すると、コードポイントで文字列の長さにアクセスできます。

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>)[]

@use@import のようなルールからの Sass のロード解決方法を制御するカスタムインポーター。

ロードは、次の順序で試行することで解決されます。

  • 現在のスタイルシートをロードするために使用されたインポーター。ロードされた URL は、現在のスタイルシートの正規の URL を基準にして解決されます。

  • Importer, FileImporter, または NodePackageImporterimporters 内に順に存在する場合、それぞれ。

  • loadPaths 内の各ロードパスを順に試行します。

これらのいずれも Sass ファイルを返さない場合、ロードは失敗し、Sass はエラーをスローします。

メッセージ

alertAscii?: boolean

これが true の場合、コンパイラーはエラーメッセージと警告メッセージで ASCII 文字のみを使用します。そうでない場合、非 ASCII Unicode 文字も使用できます。

デフォルト値

false

alertColor?: boolean

これが true の場合、コンパイラーはエラーメッセージと警告メッセージで ANSI カラーエスケープコードを使用します。false の場合は、これらを使用しません。未定義の場合、コンパイラーはユーザーが対話型ターミナルを使用しているかどうかに応じて、色を使用するかどうかを判断します。

fatalDeprecations?: (DeprecationOrId | Version)[]

致命的として扱う非推奨のセット。

コンパイル中に、提供されたいずれかの型の非推奨警告が発生した場合、コンパイラーは代わりにエラーを返します。

Version が提供された場合、そのコンパイラーバージョンでアクティブだったすべての非推奨が致命的として扱われます。

互換性

dart: "1.74.0", node: false

futureDeprecations?: DeprecationOrId[]

早期にオプトインする将来の非推奨のセット。

ここで渡された将来の非推奨は、コンパイラーによってアクティブとして扱われ、必要に応じて警告が生成されます。

互換性

dart: "1.74.0", node: false

logger?: Logger

Sass からの警告やデバッグメッセージを処理するために使用するオブジェクト。

デフォルトでは、Sass は標準エラーに警告とデバッグメッセージを出力しますが、warn または debug が設定されている場合、代わりにそれらを呼び出します。

特別な値 silent を使用すると、すべてのメッセージを簡単に抑制できます。

quietDeps?: boolean

このオプションが true に設定されている場合、Sass は依存関係によって発生する警告を出力しません。「依存関係」は、loadPaths または importers を介してロードされるすべてのファイルとして定義されます。エントリポイントを基準にインポートされるスタイルシートは、依存関係とは見なされません。

これは、自分で修正できない非推奨警告を抑制する場合に役立ちます。ただし、できるだけ早く修正できるように、依存関係にも非推奨について通知してください!

⚠️ 注意!

compileString または compileStringAsyncurl なしで呼び出された場合、ロードするすべてのスタイルシートが依存関係と見なされます。独自のパスがないため、ロードするすべてのものが相対インポートではなく、ロードパスから取得されています。

デフォルト値

false

silenceDeprecations?: DeprecationOrId[]

無視するアクティブな非推奨のセット。

コンパイル中に、提供されたいずれかの型の非推奨警告が発生した場合、コンパイラーは代わりにそれを無視します。

⚠️ 注意!

依存している非推奨の機能は、最終的には破損します。

互換性

dart: "1.74.0", node: false

verbose?: boolean

デフォルトでは、Dart Sass はコンソールノイズでユーザーを圧倒しないように、コンパイルごとに同じ非推奨警告のインスタンスを 5 つのみ出力します。verbosetrue に設定すると、代わりに発生するすべての非推奨警告を出力します。

デフォルト値

false