sass

Sass JavaScript APIは、JavaScriptからSassのコンパイルを駆動するために使用できます。アプリケーションは、スタイルシートの読み込み方法とカスタム関数の定義を制御することもできます。

npm上のsassパッケージは、Dart Sass実装から構築された純粋なJavaScriptパッケージであり、Dart Sassのコマンドラインインターフェースが含まれています。

npm上のsass-embeddedパッケージは、ネイティブのDart実行可能ファイルのJavaScriptラッパーであり、一般的にsassよりも高速です。

sassとsass-embeddedの両方とも、同じ基盤となるDart Sass実装を使用して同じJavaScript APIを提供しますが、速度とプラットフォームのトレードオフがあります。

使用方法

JavaScript APIは、SassをCSSにコンパイルするための2つのエントリポイントを提供します。それぞれに、プレーンなCompileResultを返す同期変種と、Promiseを返す非同期変種があります。**非同期変種ははるかに遅くなりますが**、カスタムインポーターと関数を非同期で実行できます。

  • compileとcompileAsyncは、Sassファイルへのパスを受け取り、そのファイルをCSSにコンパイルした結果を返します。これらの関数は、追加のOptions引数を受け入れます。

    const sass = require('sass');

    const result = sass.compile("style.scss");
    console.log(result.css);

    const compressed = sass.compile("style.scss", {style: "compressed"});
    console.log(compressed.css);

  • compileStringとcompileStringAsyncは、Sassファイルの内容を表す文字列を受け取り、そのファイルをCSSにコンパイルした結果を返します。これらの関数は、追加のStringOptions引数を受け入れます。

    const sass = require('sass');

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

    const result = sass.compileString(input);
    console.log(result.css);

    const compressed = sass.compileString(input, {style: "compressed"});
    console.log(compressed.css);

統合

ほとんどの人気のあるNode.jsビルドシステムには、JS APIで使用できる統合があります。

レガシーAPI

sassパッケージは、古いAPIもサポートしています。このAPIは非推奨ですが、sassパッケージのバージョン2.0.0のリリースまでサポートされ続けます。レガシーAPIは、非推奨のLibSass実装のネイティブ拡張ラッパーであるnode-sassパッケージでもサポートされています。

レガシーAPIには、SassをCSSにコンパイルするための2つのエントリポイントがあります。それぞれは、LegacyFileOptionsを渡してSassファイル、またはLegacyStringOptionsを渡してSassコードの文字列をコンパイルできます。

  • renderSyncは同期的に実行されます。Dart Sassを使用する場合、圧倒的に最速のオプションですが、同期的なインポーターと関数プラグインのみをサポートするという犠牲を伴います。

    const sass = require('sass'); // or require('node-sass');

    const result = sass.renderSync({file: "style.scss"});
    console.log(result.css.toString());

  • renderは非同期的に実行され、完了時にコールバックを呼び出します。Dart Sassを使用する場合、はるかに遅くなりますが、非同期的なインポーターと関数プラグインをサポートします。

    const sass = require('sass'); // or require('node-sass');

    sass.render({
      file: "style.scss"
    }, function(err, result) {
      if (err) {
        // ...
      } else {
        console.log(result.css.toString());
      }
    });

速度

Sassコンパイルにかかる時間は複数の要因によって異なりますが、コンパイル時間を最小限に抑えるのに役立つ一般的な速度の傾向があります。

sassパッケージの場合

sassパッケージでは、評価プロセス全体を非同期にするオーバーヘッドのために、同期呼び出しの方が非同期呼び出しよりも高速になります。CompilerとAsyncCompilerクラスは使用できますが、sassを使用する場合、モジュールレベルのコンパイルメソッドよりも高速ではありません。

sass-embeddedパッケージの場合

sass-embeddedパッケージは、特定の状況で大幅な速度向上をもたらし、大規模または頻繁なコンパイルでは一般的にsassよりも高速です。モジュールレベルのコンパイルメソッドを使用する場合、ワーカスレッドでの同期メッセージングのエミュレーションと、メインスレッドで複数のコンパイルがブロックされるオーバーヘッドのために、非同期呼び出しの方が同期呼び出しよりも一般的に高速です。

CompilerとAsyncCompilerクラスは、sass-embeddedパッケージを使用する場合に大幅な改善をもたらします。これらのクラスは、複数のコンパイルにわたって単一のDartプロセスを保持および再利用するため、プロセスを繰り返し起動および停止する必要がありません。

sass-embeddedを使用して単一のファイルをコンパイルする場合、同期メソッドと非同期メソッドの間に大きな違いはありません。複数のコンパイルを同時に実行する場合、AsyncCompilerの方が、同期的なCompilerよりも大幅に高速になります。

関数、インポーター、Sassファイルの複雑さなど、他の要因も、特定のユースケースに最適なコンパイル方法に影響を与える可能性があります。