2022.4.15普段Sassを使う場合にはwebpackなどNode.jsを使った環境で、あるいは直接コマンドラインでコンパイルを行うことが多いかと思いますが、Dartで使われるパッケージ管理ツールのPubからSassのパッケージに用意されているAPIを使ってコンパイルを行う方法もあります。Flutterのフレームワークを使う時などは参考になることもあるかと思いますので、備忘録として残しておきます。Sass」の使用が推奨されています。PubというのはDartで使われるパッケージ管理ツールで、Node.jsでいうところのnpmのようなものになります。SassはこのPubにもパッケージとして存在し、APIもいくつか用意されておりそこからコンパイルすることもできます。SDK」というものをインストールしていきます。"macos_x64"これでdartコマンドが使えるようになります。続いてパッケージ管理用の設定ファイルである「pubspec.yaml」を作成します。Node.jsでいうところのpackage.jsonのようなものになります。Sassのコンパイル環境の構築に必要なパッケージをインストールしていきます。pubspec.yamlには下記のように記述していきます。'^0.10.10'pubspec.yamlが用意できたら下記のコマンドで必要なパッケージをインストールしていきます。getそうすると、同階層に下記のようなパッケージ及び関連ファイル一式がインストールされているのが確認できます。pubspec.lock続けてSassのコンパイル処理を記述したファイルを作成していきます。dartコマンドでこのファイルをソースとして実行することでコンパイルが行われる仕組みになります。ファイル名は任意のものでOKです。compile.dart作成したコンパイル処理用のファイルに下記のように処理を記述していきます。Dart本体に関連するライブラリとSassのパッケージ、またソースマップ生成用などのパッケージを読み込んでいきます。'.map').writeAsStringSync(json.encode(result.sourceMap));}続けて、Dartでコンパイルの処理を作成していきます。今回の処理では引数に対象のソースファイルを出力先のファイルを指定できるようにするため、コマンドライン上で入力された引数を受け取るようにしています。その引数をもとに、コンパイル処理やコンパイル後のCSSファイルを生成する処理を記述していきます。コンパイルに関してはいろんなAPIやClassが用意されており、公式のドキュメントが参考になりますが、それ以外は他のものと比べ情報量がまだ少ない印象があります。compileToResult()メソッドを実行することで、コンパイル処理の際にコンパイル後のCSS文字列や、マッピングファイルの内容、などのオブジェクトが返されるので、それらを利用してコンパイル環境を整えていきます。今回はマッピングファイルも作成されるようにしますが、最終的にJSONの形になるようにしておきます。これでコンパイル環境の準備が整いました。あとはdartコマンドで上記のファイルと、コンパイル対象と生成後のファイルを指定して実行すると、SassファイルがコンパイルされCSSファイルが生成されるようになります。main.min.cssSassはフロントエンド開発でよく扱われていますが、コンパイル環境についてはNode.js環境で構築したり、各種ビルドツールやフレームワークなどに組み込まれていることが多いかと思います。DartのAPIを使った方法はあまり見かけませんが、設定ファイルさえ作成してしまうと同じように扱えますし、コマンド1つで必要なライブラリも揃って簡単に環境構築も用意できますので、合わせて覚えておくと便利ですね。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。