プロパティのネスト Nested Properties 記述例 《sample.scss》 .sample { border: { top: 5px solid #ccc; bottom: { width: 3px; style: dotted; color: black; } } } 《sample.css》 .sample { border-top: 5px solid #ccc; border-bottom-width: 3px; bo…

親セレクタの参照 &（アンパサンド） 《sample.scss》 .side { width: 240px; ul.bnr { margin-bottom: 10px; } } body.top .side { width: 300px; } 《sample.css》 .side { width: 240px; } .side ul.bnr { margin-bottom: 10px; } body.top .side { width…

記述演習 テキストエディターで、管理するフォルダーを選択 実際に記述してみる 「scss」フォルダーを作成 フォルダー内に「style.scss」ファイルを作成 ルールのネスト（Nested Roles） 入れ子構造を使うとクラス名の変更が楽になります 子孫の関係をシンプ…

Sass（サースまたはサス） Syntactically Awesome Stylesheets（構造的にイケてるスタイルシート） CSSをより構造的に整理して記述することができる、CSSの「メタ言語（拡張言語）」 メタ言語とは「ある言語について何らかの記述をするための言語」のこと Sa…