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 - ビルドツール統合のテンプレート

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

• 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 関数