LegacySharedOptions<sync>

renderとrenderSyncのためのオプションで、LegacyFileOptionsとLegacyStringOptionsの間で共有されます。

非推奨

これは、レガシーなrenderおよびrenderSync APIでのみ動作します。Optionsをcompile、compileString、compileAsync、およびcompileStringAsync の代わりに使用してください。

型パラメーター

sync extends "sync" | "async"

これにより、TypeScriptチェッカーは、LegacyAsyncImporterとLegacyAsyncFunctionがrenderSyncに渡されないことを検証できます。

階層

LegacySharedOptions
- LegacyFileOptions
- LegacyStringOptions

インデックス

入力

`オプション` includePaths

includePaths?: string[]

Dart Sass: 1.15.0以降
Node Sass: 3.9.0以降

以前のバージョンのDart SassおよびNode Sassでは、SASS_PATH環境変数はサポートされていませんでした。

この文字列の配列オプションは、Sassがスタイルシートを検索するためのロードパスを提供します。以前のロードパスは、後のロードパスよりも優先されます。

sass.renderSync({
  file: "style.scss",
  includePaths: ["node_modules/bootstrap/dist/css"]
});

ロードパスは、設定されている場合はSASS_PATH環境変数からもロードされます。この変数は、;（Windowsの場合）または:（他のオペレーティングシステムの場合）で区切られたパスのリストである必要があります。includePathsオプションからのロードパスは、SASS_PATHからのロードパスよりも優先されます。

$ SASS_PATH=node_modules/bootstrap/dist/css sass style.scss style.css

出力

`オプション` charset

charset?: boolean

Dart Sass: 1.39.0以降
Node Sass: ✗

デフォルトでは、CSSドキュメントに非ASCII文字が含まれている場合、Sassは（展開出力モードで）@charset宣言、または（圧縮モードで）バイトオーダーマークを追加して、ブラウザーまたは他のコンシューマーへのエンコーディングを示します。charsetがfalseの場合、これらの注釈は省略されます。

`オプション` indentType

indentType?: "space" | "tab"

Dart Sass: ✓
Node Sass: 3.0.0以降

生成されたCSSで、インデントにスペースとタブのどちらを使用するか。

const result = sass.renderSync({
  file: "style.scss",
  indentType: "tab",
  indentWidth: 1
});

result.css.toString();
// "h1 {\n\tfont-size: 40px;\n}\n"

デフォルト値

'space'

`オプション` indentWidth

indentWidth?: number

Dart Sass: ✓
Node Sass: 3.0.0以降

生成されたCSSのインデントレベルごとに、いくつのスペースまたはタブ（indentTypeによって異なります）を使用する必要がありますか。0から10までの範囲（両端を含む）である必要があります。

デフォルト値

2

`オプション` linefeed

linefeed?: "cr" | "crlf" | "lf" | "lfcr"

Dart Sass: ✓
Node Sass: 3.0.0以降

生成されたCSSの各行末に使用する文字シーケンス。次の値を指定できます。

'lf' は U+000A LINE FEED を使用します。
'lfcr' は U+000A LINE FEED に続いて U+000D CARRIAGE RETURN を使用します。
'cr' は U+000D CARRIAGE RETURN を使用します。
'crlf' は、U+000D キャリッジリターンと U+000A ラインフィードを組み合わせたものを使用します。

デフォルト値

'lf'

`Optional` outputStyle

outputStyle?: "expanded" | "compact" | "compressed" | "nested"

コンパイルされたCSSの出力スタイル。4つの出力スタイルがあります。

"expanded" (Dart Sass のデフォルト) は、各セレクターと宣言を個別の行に書き出します。
"compressed" は、可能な限り余分な文字を削除し、スタイルシート全体を単一行に書き出します。
"nested" (Node Sass のデフォルトで、Dart Sass ではサポートされていません) は、Sass ソースのネストに合わせてCSSルールをインデントします。
"compact" (Dart Sass ではサポートされていません) は、各CSSルールを単一行に配置します。

例

const source = `
h1 {
  font-size: 40px;
  code {
    font-face: Roboto Mono;
  }
}`;

let result = sass.renderSync({
  data: source,
  outputStyle: "expanded"
});
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// h1 code {
//   font-face: Roboto Mono;
// }

result = sass.renderSync({
  data: source,
  outputStyle: "compressed"
});
console.log(result.css.toString());
// h1{font-size:40px}h1 code{font-face:Roboto Mono}

result = sass.renderSync({
  data: source,
  outputStyle: "nested"
});
console.log(result.css.toString());
// h1 {
//   font-size: 40px; }
//   h1 code {
//     font-face: Roboto Mono; }

result = sass.renderSync({
  data: source,
  outputStyle: "compact"
});
console.log(result.css.toString());
// h1 { font-size: 40px; }
// h1 code { font-face: Roboto Mono; }

プラグイン

`Optional` functions

functions?: {
[key: string]: LegacyFunction<sync>;
}

すべてのスタイルシートで利用可能な、追加の組み込み Sass 関数。このオプションは、キーが Sass 関数のシグネチャで、値が LegacyFunction であるオブジェクトを受け取ります。各関数は、シグネチャと同じ引数を受け取る必要があります。

関数には LegacyValue のサブクラスが渡され、同じものを返す必要があります。

⚠️ 注意！

カスタム関数を記述する際には、すべての引数が予期される型であることを確認することが重要です。そうしないと、ユーザーのスタイルシートがデバッグ困難な方法でクラッシュしたり、さらに悪いことに、意味のないCSSにコンパイルされたりする可能性があります。

例

sass.render({
  data: `
h1 {
  font-size: pow(2, 5) * 1px;
}`,
  functions: {
    // This function uses the synchronous API, and can be passed to either
    // renderSync() or render().
    'pow($base, $exponent)': function(base, exponent) {
      if (!(base instanceof sass.types.Number)) {
        throw "$base: Expected a number.";
      } else if (base.getUnit()) {
        throw "$base: Expected a unitless number.";
      }

      if (!(exponent instanceof sass.types.Number)) {
        throw "$exponent: Expected a number.";
      } else if (exponent.getUnit()) {
        throw "$exponent: Expected a unitless number.";
      }

      return new sass.types.Number(
          Math.pow(base.getValue(), exponent.getValue()));
    },

    // This function uses the asynchronous API, and can only be passed to
    // render().
    'sqrt($number)': function(number, done) {
      if (!(number instanceof sass.types.Number)) {
        throw "$number: Expected a number.";
      } else if (number.getUnit()) {
        throw "$number: Expected a unitless number.";
      }

      done(new sass.types.Number(Math.sqrt(number.getValue())));
    }
  }
}, function(err, result) {
  console.log(result.css.toString());
  // h1 {
  //   font-size: 32px;
  // }
});

型宣言

[key: string]: LegacyFunction<sync>

`Optional` importer

importer?: LegacyImporter<sync> | LegacyImporter<sync>[]

Dart Sass: ✓
Node Sass: 3.0.0以降

Node Sass の 3.0.0 より前のバージョンでは、インポーターの配列や、Error オブジェクトを返すインポーターはサポートされていません。

Node Sass の 2.0.0 より前のバージョンでは、importer オプションはまったくサポートされていません。

Dart Sass: 1.20.2 以降
Node Sass: ✗

Dart Sass の 1.20.2 より前のバージョンでは、カスタムインポーターを使用するよりも先に、includePaths を使用してインポートを解決することを優先していました。

現在、Node Sass のすべてのバージョンでは、@import が記述されているファイルに対して相対的にロードする前に、インポートをインポーターに渡します。この動作は正しくないと見なされており、システムのセットアップ全体をすべて知らなくてもスタイルシートについて推論できるようにする必要があるというローカリティの原則に違反するため、依存すべきではありません。ユーザーが別のスタイルシートに対して相対的にスタイルシートをインポートしようとした場合、そのインポートは常に機能する必要があります。他の場所の設定がそれを壊すことがあってはなりません。

@use ルールまたは @import ルールが検出されたときにファイルをロードするための追加のハンドラー。単一の LegacyImporter 関数、または LegacyImporter の配列のいずれかを指定できます。

インポーターは、@import または @use ルールのURLを受け取り、そのルールをどのように処理するかを示す LegacyImporterResult を返します。詳細については、LegacySyncImporter および LegacyAsyncImporter を参照してください。

ロードは、次の順序で試行されます。

@use または @import が記述されているファイルに対して相対的にディスクからファイルをロードします。
各カスタムインポーター。
現在の作業ディレクトリに対して相対的にファイルをロードします。
includePaths 内の各ロードパス。
SASS_PATH 環境変数で指定された各ロードパス。Windows ではセミコロン区切り、それ以外ではコロン区切りである必要があります。

例

sass.render({
  file: "style.scss",
  importer: [
    // This importer uses the synchronous API, and can be passed to either
    // renderSync() or render().
    function(url, prev) {
      // This generates a stylesheet from scratch for `@use "big-headers"`.
      if (url != "big-headers") return null;

      return {
        contents: `
h1 {
  font-size: 40px;
}`
      };
    },

    // This importer uses the asynchronous API, and can only be passed to
    // render().
    function(url, prev, done) {
      // Convert `@use "foo/bar"` to "node_modules/foo/sass/bar".
      const components = url.split('/');
      const innerPath = components.slice(1).join('/');
      done({
        file: `node_modules/${components.first}/sass/${innerPath}`
      });
    }
  ]
}, function(err, result) {
  // ...
});

`Optional` pkgImporter

pkgImporter?: NodePackageImporter

Dart Sass: 2.0 以降
Node Sass: ✗

このオプションが NodePackageImporter のインスタンスに設定されている場合、Sass は組み込みの Node.js パッケージインポーターを使用して、pkg: URL スキームを持つ Sass ファイルを解決します。ライブラリの作成者とユーザーの詳細については、NodePackageImporter のドキュメントを参照してください。

例

sass.renderSync({
  data: '@use "pkg:vuetify";',
  pkgImporter: new sass.NodePackageImporter()
});

メッセージ

`Optional` fatalDeprecations

fatalDeprecations?: (DeprecationOrId | Version)[]

致命的とみなす非推奨のセット。

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

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

互換性

dart: "1.78.0", node: false

`Optional` futureDeprecations

futureDeprecations?: DeprecationOrId[]

早期にオプトインする、今後の非推奨のセット。

ここで渡された今後の非推奨は、コンパイラによってアクティブとして扱われ、必要に応じて警告を発行します。

互換性

dart: "1.78.0", node: false

`Optional` logger

logger?: Logger

Dart Sass: 1.43.0 以降
Node Sass: ✗

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

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

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

`Optional` quietDeps

quietDeps?: boolean

Dart Sass: since 1.35.0
Node Sass: ✗

このオプションをtrueに設定すると、Sassは依存関係によって引き起こされる警告を出力しません。「依存関係」とは、includePathsまたはimporterを介してロードされるすべてのファイルを指します。エントリポイントを基準としてインポートされるスタイルシートは、依存関係とはみなされません。

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

⚠️ 注意！

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

デフォルト値

false

`Optional` silenceDeprecations

silenceDeprecations?: DeprecationOrId[]

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

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

⚠️ 注意！

依存している非推奨機能はいずれ壊れます。

互換性

dart: "1.78.0", node: false

`Optional` verbose

verbose?: boolean

Dart Sass: since 1.35.0
Node Sass: ✗

デフォルトでは、Dart Sassは、コンソールがノイズで溢れるのを防ぐために、コンパイルごとに同じ非推奨警告のインスタンスを5つだけ出力します。verboseをtrueに設定すると、代わりに発生したすべての非推奨警告を出力します。

デフォルト値

false

ソースマップ

`Optional` omitSourceMapUrl

omitSourceMapUrl?: boolean

trueの場合、Sassは生成されたCSSからソースマップへのリンクを追加しません。

const result = sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  omitSourceMapUrl: true
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }

デフォルト値

false

`Optional` outFile

outFile?: string

Sassが生成されたCSSを保存すると予想される場所です。これは、生成されたCSSからソースマップへ、またソースマップからSassソースファイルへリンクするために使用されるURLを決定するために使用されます。

⚠️ 注意！

名前とは異なり、SassはCSS出力をこのファイルに書き込みません。呼び出し側がそれを実行する必要があります。

result = sass.renderSync({
  file: "style.scss",
  sourceMap: true,
  outFile: "out.css"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.css.map * /

`Optional` sourceMap

sourceMap?: string | boolean

Sassがソースマップを生成するかどうか。生成する場合、ソースマップはmapとして利用可能です（sourceMapEmbedがtrueでない限り）。

このオプションが文字列の場合、ソースマップの書き込み先となるパスであり、生成されたCSSからソースマップへのリンク、およびソースマップからSassソースファイルへのリンクに使用されます。sourceMapが文字列でoutFileが渡されない場合、Sassは、ファイルオプションが渡された場合、CSSがファイルオプションと同じディレクトリに書き込まれると想定します。

このオプションがtrueの場合、パスはoutFileに.mapを末尾に追加したものと想定されます。trueで、outFileが渡されない場合、効果はありません。

例

let result = sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.map * /

result = sass.renderSync({
  file: "style.scss",
  sourceMap: true,
  outFile: "out.css"
})
console.log(result.css.toString());
// h1 {
//   font-size: 40px;
// }
// /*# sourceMappingURL=out.css.map * /

デフォルト値

false

`Optional` sourceMapContents

sourceMapContents?: boolean

生成されたCSSに貢献したSassファイルの内容全体をソースマップに埋め込むかどうか。これにより、非常に大きなソースマップが生成される可能性がありますが、CSSがどのように提供されるかに関係なく、ソースが任意のコンピューターで利用可能になることが保証されます。

例

sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  sourceMapContents: true
})

デフォルト値

false

`Optional` sourceMapEmbed

sourceMapEmbed?: boolean

ソースマップファイルの内容を、個別のファイルを作成してCSSからリンクするのではなく、生成されたCSSに埋め込むかどうか。

例

sass.renderSync({
  file: "style.scss",
  sourceMap: "out.map",
  sourceMapEmbed: true
});

デフォルト値

false

`Optional` sourceMapRoot

sourceMapRoot?: string

これを渡すと、ソースマップからSassソースファイルへのすべてのリンクの先頭に付加されます。

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド

非推奨

型パラメーター

sync extends "sync" | "async"

階層

インデックス

入力

出力

プラグイン

メッセージ

ソースマップ

入力

オプション includePaths

出力

オプション charset

オプション indentType

デフォルト値

オプション indentWidth

デフォルト値

オプション linefeed

デフォルト値

Optional outputStyle

例

プラグイン

Optional functions

⚠️ 注意！

例

型宣言

[key: string]: LegacyFunction<sync>

Optional importer

例

Optional pkgImporter

例

メッセージ

Optional fatalDeprecations

互換性

Optional futureDeprecations

互換性

Optional logger

Optional quietDeps

⚠️ 注意！

デフォルト値

Optional silenceDeprecations

⚠️ 注意！

互換性

Optional verbose

デフォルト値

ソースマップ

Optional omitSourceMapUrl

デフォルト値

Optional outFile

⚠️ 注意！

Optional sourceMap

例

デフォルト値

Optional sourceMapContents

例

デフォルト値

Optional sourceMapEmbed

例

デフォルト値

Optional sourceMapRoot

`オプション` includePaths

`オプション` charset

`オプション` indentType

`オプション` indentWidth

`オプション` linefeed

`Optional` outputStyle

`Optional` functions

`Optional` importer

`Optional` pkgImporter

`Optional` fatalDeprecations

`Optional` futureDeprecations

`Optional` logger

`Optional` quietDeps

`Optional` silenceDeprecations

`Optional` verbose

`Optional` omitSourceMapUrl

`Optional` outFile

`Optional` sourceMap

`Optional` sourceMapContents

`Optional` sourceMapEmbed

`Optional` sourceMapRoot