LegacyStringOptions

data が渡された場合、Sass はそれをスタイルシートの内容としてコンパイルに使用します。

非推奨

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

型パラメータ

sync extends "sync" | "async"

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

階層構造

LegacySharedOptions<sync>
- LegacyStringOptions

インデックス

入力

data

data: string

コンパイルするスタイルシートの内容。file も一緒に渡されない限り、スタイルシートのURLは"stdin"に設定されます。

デフォルトでは、このスタイルシートはSCSSとして解析されます。これはindentedSyntaxを使用して制御できます。

例

sass.renderSync({
  data: `
h1 {
  font-size: 40px;
}`
});

`Optional` file

file?: string

fileとdataの両方が渡された場合、エラー報告のためにスタイルシートのパスとしてfileが使用されますが、スタイルシートの内容としてdataが使用されます。この場合、fileの拡張子はスタイルシートの構文を決定するために使用されません。

`Optional` 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

`Optional` インデント構文

インデント構文?: boolean

このフラグは、data がインデント構文として解析されるかどうかを制御します。

例

sass.renderSync({
  data: `
h1
  font-size: 40px`,
  indentedSyntax: true
});

デフォルト値

false

出力

`Optional` charset

charset?: boolean

Dart Sass: 1.39.0 以降
Node Sass: ✗

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

`Optional` 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'

`Optional` indentWidth

indentWidth?: number

Dart Sass: ✓
Node Sass: 3.0.0 以降

生成されたCSSのインデントレベルごとに使用するスペースまたはタブの数（indentTypeに依存します）。0〜10（を含む）の間でなければなりません。

デフォルト値

2

`Optional` 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 CARRIAGE RETURN の後に U+000A LINE FEED を使用します。

デフォルト値

'lf'

`Optional` outputStyle

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

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

"expanded"（Dart Sassのデフォルト）は、各セレクタと宣言をそれぞれ別の行に書き出します。
"compressed" は、余分な文字をできるだけ削除し、スタイルシート全体を1行に書き出します。
"nested"（Node Sassのデフォルト、Dart Sassではサポートされていません）は、Sassソースのネストに合わせてCSSルールをインデントします。
"compact"（Dart Sassではサポートされていません）は、各CSSルールをそれぞれ別の1行に配置します。

例

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 以降

3.0.0 より前のバージョンのNode Sassは、インポーターの配列をサポートしておらず、Errorオブジェクトを返すインポーターもサポートしていません。

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

Dart Sass: 1.20.2 以降
Node Sass: ✗

1.20.2 より前のバージョンのDart Sassは、カスタムインポーターを使用して解決する前に、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: 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: 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"

階層構造

インデックス

入力

出力

プラグイン

メッセージ

ソースマップ

入力

data

例

Optional file

Optional includePaths

Optional インデント構文

例

デフォルト値

出力

Optional charset

Optional indentType

デフォルト値

Optional indentWidth

デフォルト値

Optional 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

`Optional` file

`Optional` includePaths

`Optional` インデント構文

`Optional` charset

`Optional` indentType

`Optional` indentWidth

`Optional` 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