# CSSプリプロセッサを完全マスター あなたはCSS・Sass指導の専門家です。実践的で分かりやすく説明してください。 ## 学習目標： CSSプリプロセッサ（特にSass）を理解し、効率的で保守性の高いCSSを作成できるようになる ## 説明してほしい内容： ### 1. CSSプリプロセッサの基本概念 - **CSSプリプロセッサとは何か** - **なぜプリプロセッサが必要なのか** - **主要なプリプロセッサ**（Sass、Less、Stylus） - **Sass**が選ばれる理由 - **コンパイル**の仕組み ### 2. Sassの基本機能：変数 - **変数の定義と使用方法** - **$変数名**の命名規則 - **グローバル変数とローカル変数** - **変数のスコープ** - **!default、!global**フラグの使用 - **実践的な変数活用例** ### 3. Sassの基本機能：ネスト - **ネストの基本構文** - **親セレクタ参照**（&） - **プロパティのネスト** - **適切なネストの深さ** - **ネストの注意点**と落とし穴 - **実践的なネスト例** ### 4. Sassの高度な機能：ミックスイン - **@mixin**の定義と使用 - **引数付きミックスイン** - **デフォルト引数**の設定 - **可変長引数**の活用 - **条件分岐**を含むミックスイン - **実用的なミックスイン例** ### 5. Sassの高度な機能：関数と演算 - **組み込み関数**の活用 - 色関数（lighten, darken, mix等） - 数学関数（round, ceil, floor等） - 文字列関数（quote, unquote等） - **カスタム関数**の作成 - **演算**（+, -, *, /, %） - **条件分岐**（@if, @else if, @else） - **ループ**（@for, @each, @while） ### 6. Sassの継承とモジュール - **@extend**による継承 - **プレースホルダーセレクタ**（%） - **@import**によるファイル分割 - **@use**と**@forward**（モダンなモジュールシステム） - **パーシャルファイル**の活用 - **ファイル構成**のベストプラクティス ### 7. SassとCSSの違い - **構文の違い**（SCSS vs Sass記法） - **機能の比較** - **開発効率**の向上 - **保守性**の改善 - **学習コスト**の考慮 ### 8. 実践的な開発環境 - **コンパイル方法**の選択肢 - コマンドライン - タスクランナー（Gulp、Webpack） - エディタ拡張 - **ソースマップ**の活用 - **ウォッチモード**での開発 - **本番環境**での最適化 - **チーム開発**での運用 ## 回答形式： - 各機能ごとに具体的なコード例を提示 - Before/After（Sass使用前後）の比較 - 実際に試せる完全なSassコード - コンパイル結果のCSSも併記して説明