Sass/SCSS とは？

CSSって同じ色コードを何回も書いたり、長いセレクタを繰り返したりして面倒だよね。Sassは「$primary-color: #3498db;」みたいに変数が使えるから、色を変えたいとき1か所直すだけで全部変わるんだ。

実は書き方が2種類あるんだ。Sass記法は波括弧やセミコロンを省略してインデントで構造を表す書き方。SCSS記法は普通のCSSとほぼ同じ見た目で、CSSをそのままコピペしても動く書き方。今はSCSSの方が主流だよ。

たとえば「.nav」の中の「.nav-item」のスタイルを書くとき、CSSだと「.nav .nav-item { }」って毎回フルで書くよね。SCSSなら「.nav { .nav-item { } }」って入れ子にできるから、HTMLの構造と対応していてわかりやすいんだ。

読めないんだ。だから「コンパイル」といって、Sassを普通のCSSファイルに変換する処理が必要だよ。WebpackやViteのプラグインを使えば自動でやってくれるから、あまり意識しなくて済むけどね。

CSS自体が進化して、カスタムプロパティ（CSS変数）やネスト構文がネイティブで使えるようになってきたからね。ただSassの@useや@forwardによるモジュール分割は、大規模プロジェクトで何百ものスタイルファイルを管理するときにまだ優位性があるんだ。問題は旧式の@import構文から新しい@use構文への移行で、名前空間やスコープの考え方がまるで変わるから、移行計画を立てるのはベテランでもかなり頭を使うポイントだよ。