bootstrap5がリリースされてしばらく経つので、そろそろ導入を検討。
社内ではSCSSを使用するユーザがいないので習得を先延ばしにしていた（自分以外にメンテナンスできなくなる）SCSSだが、時代の潮流に合わせて習得することを目指すこととす。
SCSSとは？
SCSSとは、Sassの構文の一つであり、ウェブページのスタイルを指定するCSSをより効率よく記述するためのものです。
https://www.fenet.jp/dotnet/column/tool/5245/
SassにはSASS記法とSCSS記法があります。
Sass記法は、波かっこやコロン、セミコロンなどが必要なく、効率的にコードを書けるもので、.sassという拡張子を使います。
SCSS記法は、今までCSSとの互換性を持たせるために後から追加された記法で、拡張子は.scssとなります。
SCSS記法では、通常のCSSが分かる人であれば問題なくコードが理解できるようになっていることもあり、現在ではSCSS記法が主流です。
https://digitalidentity.co.jp/blog/creative/css-sass.html
要はSassという概念を実現するのに、SASS（全部大文字）とSCSSという2つの流派があって、後にできたSCSSの方が可読性に優れているので普及したという感じ。
Bootstrap5で採用されているのがSCSSとのことなので、主流派のSCSSを学ぶことにする。
メリット・布教法
CSSで十分、というユーザに布教する際のメリットは下記のようなものがある。
流行・権威
- 現在のウェブ制作の世界では常識的に使われている
- 主要なフレームワークなどでも採用されているので、知識がないと読解自体できない
- 紹介記事が多数あるのでだいたい分からないことは解消できそう
利便性
- 変数が使える（使いまわし・メンテナンスに便利）
- 親子関係や疑似要素などが入れ子で簡潔に記述できる（関係性が誰から見ても明解）
- パーツに分けたファイル管理ができる（CSSでやると読み込み遅延などデメリットが多い）
// 変数のサンプル
// SCSSはスラッシュ2つでコメントアウトでき、コンパイル後は消去される（便利！）
// 通常の/* hoge */式でもコメントアウトできる。こちらはコンパイル後も残る
header{
a{
background-color: black;
color: #FFF;
}
}コンパイルするとこうなる。アウトプットの方式は4種類あり、SCSSの設定ファイルに記述することで自由に選択できる。基本はexpandedになりそう。
header a {
background-color: black;
color:#FFF;
}SCSSの注意点
SCSSが通常のCSSと異なるのが、SCSSをCSSに変換（コンパイル）する工程が必要なところ。
正攻法でコンパイルする環境を作る場合は、Rubyをインストールした上でなんやかんや必要。ただvscodeの便利なプラグイン「Live Sass Compiler」があるのでそちらを使うことにする。これを入れると、.scssで保存をかけると同時に.css形式でデータが作成・更新される。神か。
なおdreamweaverは標準機能でSCSSの出力機能がある。
