Options<sync>
型パラメーター
-
sync extends "sync" | "async"
これにより、TypeScriptチェッカーは、非同期のImporter、FileImporter、およびCustomFunctionがcompileまたはcompileStringに渡されないことを検証できます。
階層
- オプション
入力
オプション
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));
}
}
出力
オプション
charset
- Dart Sass
- 1.54.0以降
- Node Sass
- ✗
true
の場合、コンパイラーは非-ASCII CSSを出力する場合、@charset "UTF-8";
またはU+FEFF(バイトオーダーマーク)を先頭に付加する場合があります。
false
の場合、コンパイラーはこれらのバイトシーケンスを決して出力しません。これは、HTML <style>
タグで連結または埋め込む場合に理想的です。(出力は依然としてUTF-8になります。)
デフォルト値
true
オプション
sourceMap
Sassがソースマップを生成するかどうか。生成する場合、ソースマップはsourceMapとして利用可能になります。
⚠️ 注意!
Sassは、生成されたCSSにsourceMappingURL
コメントを自動的に追加しません。呼び出し元が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関数。このオプションは、@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
@use
や @import
のようなルールからの Sass のロード解決方法を制御するカスタムインポーター。
ロードは、次の順序で試行することで解決されます。
現在のスタイルシートをロードするために使用されたインポーター。ロードされた URL は、現在のスタイルシートの正規の URL を基準にして解決されます。
Importer, FileImporter, または NodePackageImporter が importers 内に順に存在する場合、それぞれ。
loadPaths 内の各ロードパスを順に試行します。
これらのいずれも Sass ファイルを返さない場合、ロードは失敗し、Sass はエラーをスローします。
メッセージ
省略可能
alertAscii
これが true
の場合、コンパイラーはエラーメッセージと警告メッセージで ASCII 文字のみを使用します。そうでない場合、非 ASCII Unicode 文字も使用できます。
デフォルト値
false
省略可能
alertColor
これが true
の場合、コンパイラーはエラーメッセージと警告メッセージで ANSI カラーエスケープコードを使用します。false
の場合は、これらを使用しません。未定義の場合、コンパイラーはユーザーが対話型ターミナルを使用しているかどうかに応じて、色を使用するかどうかを判断します。
省略可能
fatalDeprecations
致命的として扱う非推奨のセット。
コンパイル中に、提供されたいずれかの型の非推奨警告が発生した場合、コンパイラーは代わりにエラーを返します。
Version
が提供された場合、そのコンパイラーバージョンでアクティブだったすべての非推奨が致命的として扱われます。
互換性
dart: "1.74.0", node: false
省略可能
futureDeprecations
早期にオプトインする将来の非推奨のセット。
ここで渡された将来の非推奨は、コンパイラーによってアクティブとして扱われ、必要に応じて警告が生成されます。
互換性
dart: "1.74.0", node: false
省略可能
logger
省略可能
quietDeps
このオプションが true
に設定されている場合、Sass は依存関係によって発生する警告を出力しません。「依存関係」は、loadPaths または importers を介してロードされるすべてのファイルとして定義されます。エントリポイントを基準にインポートされるスタイルシートは、依存関係とは見なされません。
これは、自分で修正できない非推奨警告を抑制する場合に役立ちます。ただし、できるだけ早く修正できるように、依存関係にも非推奨について通知してください!
⚠️ 注意!
compileString または compileStringAsync が url なしで呼び出された場合、ロードするすべてのスタイルシートが依存関係と見なされます。独自のパスがないため、ロードするすべてのものが相対インポートではなく、ロードパスから取得されています。
デフォルト値
false
省略可能
silenceDeprecations
無視するアクティブな非推奨のセット。
コンパイル中に、提供されたいずれかの型の非推奨警告が発生した場合、コンパイラーは代わりにそれを無視します。
⚠️ 注意!
依存している非推奨の機能は、最終的には破損します。
互換性
dart: "1.74.0", node: false
省略可能
verbose
デフォルトでは、Dart Sass はコンソールノイズでユーザーを圧倒しないように、コンパイルごとに同じ非推奨警告のインスタンスを 5 つのみ出力します。verbose
を true
に設定すると、代わりに発生するすべての非推奨警告を出力します。
デフォルト値
false
compile、compileAsync、compileString、またはcompileStringAsyncに渡すことができるオプション。