ブラウザでのSass

2023年7月7日投稿者：Natalie Weizenbaum

Sass の歴史を通して、私たちが先駆けて導入した多くの機能がブラウザで採用されるのを見てきました。 CSS変数、算術関数、そして最近ではネストはすべて Sass によって着想を得ています。しかし、Sass 自体をブラウザ内でコンパイラとして実行することは、これまで不可能でした…それが 今、可能になりました。

Dart Sass 1.63 のリリースにより、sass npm パッケージへのブラウザでの直接実行のサポートを正式に追加しました。プレイグラウンドやウェブ IDE の作成者は、Sass をコンパイルするためにサーバー呼び出しを行う必要がなくなりました。今では、それをロードして、ページ上で直接使用できます。 

実際、今すぐ試すことができます！開発者コンソールを開いて、以下を実行してください。 

const sass = await import('https://jspm.dev/sass');
sass.compileString('a {color: #663399}');

その他の使用方法その他の使用方法 パーマリンク

ブラウザでの Sass をできるだけ多くの方法で使用できるように最善を尽くしました。CommonJS の require() と ES6 の import の両方を使用してロードできます。バンドラ（esbuild、Rollup、Vite、webpack でテスト済み）でロードすることも、バンドルなしでブラウザに直接ロードすることもできます。 

唯一の注意点として、Immutable ライブラリに依存しているため、バンドルなしで完全に使用する場合、import map を設定して、その依存関係を見つける必要があります。ただし、バンドラまたはJSPMのような依存関係をプルするCDNを使用している場合は、心配する必要はありません。 

Dart Sass の README は、さまざまな方法でブラウザで Dart Sass を使い始めるための詳細情報を網羅した公式の情報源です。 

使用可能な API使用可能な API パーマリンク

ブラウザで可能な限り多くのJavaScript APIを使用できるように努めました。 カスタム関数とインポーターの両方がサポートされており、完全なSass 値 APIもサポートされています。ただし、ブラウザで使用できないAPIのカテゴリが2つあります。 

  1. ファイルシステムの存在を前提とするすべてのAPI。つまり、FileImporterを渡すことはできませんが、ファイルパスを受け取るcompile関数とcompileAsync関数は使用できません。代わりにcompileStringまたはcompileStringAsyncを使用する必要があります。

  2. レガシー JavaScript API。このAPIは、非推奨のnode-sassパッケージとの互換性のためにのみ存在します。node-sassはブラウザでの実行をサポートしておらず、このAPIはファイルシステムからのロードと他のソースからのロードの区別があいまいです。そのため、ブラウザではサポートしないことにしました。 

試してみる試してみる パーマリンク

Sass はブラウザで直接実行できるようになったため、Sass ウェブサイトに長らく待望されていた機能を追加することができました。 Sass プレイグラウンドです！これは、ブラウザで Sass を直接テストする方法であり、Sass ウェブサイトのデプロイプロセスに接続されているため、常に最新のバージョンとすべての最新機能が使用されます。 

プレイグラウンドのスタイルシートは常にプレイグラウンドのURLに保存されるため、サンプルスタイルシートを簡単に共有したり、Sass チームにバグを報告するために使用したりできます。ぜひ試してみてください。 

謝辞謝辞 パーマリンク

これを実現してくれたOddBirdの素晴らしい皆さん、特に