dart-sass

このスキルを使う場面

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• Dart Sass をインストールして設定する
• Sass/SCSS ファイルを CSS にコンパイルする
• Sass の構文機能（変数、ネスト、ミックスイン、関数など）を使用する
• Sass のモジュールとインポートを扱う
• Sass をビルドツールやワークフローに統合する
• Sass CLI コマンドを使用する
• Sass のコンパイルオプションを設定する
• JavaScript または Dart プロジェクトで Sass を使用する
• Sass のコンパイル性能を最適化する
• Sass のソースマップを扱う

このスキルの使い方

Dart Sass を使用するには：

1. Dart Sass をインストールする：

   • インストール手順については examples/getting-started/installation.md を読み込みます
   • 基本的な使用例については examples/getting-started/basic-usage.md を読み込みます
   • 各種コンパイルモードについては examples/getting-started/compiling-modes.md を読み込みます

2. Sass の構文を学ぶ：

   • 変数の使い方については examples/syntax/variables.md を読み込みます
   • ネスト構文については examples/syntax/nesting.md を読み込みます
   • ミックスインについては examples/syntax/mixins.md を読み込みます
   • 関数については examples/syntax/functions.md を読み込みます
   • 演算子については examples/syntax/operators.md を読み込みます
   • アットルールについては examples/syntax/at-rules.md を読み込みます

3. 高度な機能を使用する：

   • モジュールシステムについては examples/features/modules.md を読み込みます
   • インポートについては examples/features/imports.md を読み込みます
   • 制御フローについては examples/features/control-flow.md を読み込みます
   • 組み込みモジュールについては examples/features/built-in-modules.md を読み込みます
   • ソースマップについては examples/features/source-maps.md を読み込みます
   • カスタム関数については examples/features/custom-functions.md を読み込みます

4. 必要に応じて API ドキュメントを参照します：

   • api/js-api.md - JavaScript API リファレンス
   • api/dart-api.md - Dart API リファレンス
   • api/cli-api.md - CLI コマンドリファレンス

5. クイックスタートにはテンプレートを使用します：

   • templates/basic-project.md - 基本的な Sass プロジェクトのテンプレート
   • templates/modular-project.md - モジュール型 Sass プロジェクトのテンプレート
   • templates/build-integration.md - ビルドツール統合のテンプレート

ドキュメントの対応関係（公式ドキュメントと1対1で対応）

• examples/ → https://sass-lang.com/documentation/

例とテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細な例が含まれています。すべての例は examples/ ディレクトリにあります（上記の対応関係を参照）。

例を使用するには：

• ユーザーのリクエストからトピックを特定します
• 上記の対応関係から適切な例のファイルを読み込みます
• そのファイルの手順、構文、ベストプラクティスに従います
• コード例を具体的なユースケースに合わせて調整します

テンプレートを使用するには：

• よく使われるプロジェクトのひな形については、templates/ ディレクトリのテンプレートを参照します
• テンプレートを具体的なニーズやコーディングスタイルに合わせて調整します

API リファレンス

• JavaScript API：api/js-api.md - Sass をコンパイルするための JavaScript API（compile、compileString など）
• Dart API：api/dart-api.md - Sass をコンパイルするための Dart API
• CLI API：api/cli-api.md - コマンドラインインターフェースのオプションと使い方

ベストプラクティス

1. @import ではなく @use を使用する：@import ルールは非推奨です。代わりに @use と @forward を使用してください
2. モジュールで整理する：コードを整理して共有するには、モジュールシステムを使用します
3. コンパイルを最適化する：適切な出力スタイルを使用します（本番環境では compressed）
4. ソースマップ：開発時はソースマップを有効にし、本番環境では無効にします
5. ウォッチモード：開発時は --watch を使用して、変更時に自動で再コンパイルします
6. ロードパス：--load-path を使用してインポートパスを簡潔にします
7. パフォーマンス：最高のパフォーマンスを得るには Dart Sass を使用します（Ruby Sass より高速です）
8. バージョン管理：コンパイル済み CSS ファイルはコミットせず、Sass のソースファイルのみをコミットします

リソース

• 公式ウェブサイト：https://sass-lang.com/dart-sass/
• インストールガイド：https://sass-lang.com/install/
• ドキュメント：https://sass-lang.com/documentation/
• GitHub リポジトリ：https://github.com/sass/dart-sass
• npm パッケージ：https://www.npmjs.com/package/sass
• pub.dev パッケージ：https://pub.dev/packages/sass

キーワード

dart-sass, sass, scss, CSS プリプロセッサ, Sass コンパイラー, Sass 構文, Sass モジュール, Sass ミックスイン, Sass 関数, Sass 変数, Sass ネスト, @use, @forward, @import, @include, @mixin, @function, sass:math, sass:color, sass:string, ソースマップ, Sass CLI, Sass API, スタイルプリプロセッサ, Sass コンパイラー, Sass 構文, Sass モジュール, Sass ミックスイン, Sass 関数