SCSS ファイルの分割とmapファイル

SassとSCSSについての基礎と環境構築は完了したので、具体的な実装まわりの基礎知識を整理する。

基本の記法

SCSSはCSSと基本が基本的には同じなので、既存のCSSの拡張子を.scssに変更するだけでも使用することができる。

CSSが長くなった場合に、メンテナンス性を高めるために@importを使用して複数のCSSを読み込むような形がとられるケースがある。これは読み込み速度が低下するなどデメリットが多い。

/* よくあるやつ */
@import "header.css"
@import "main.css"
@import "footer.css"

SCSSではSCSS上でファイルを分割して管理し、コンパイル時に合体させることができる。呼び出し方はCSSと同じ。これをデリヴァティブと呼ぶ。

が、@importは2022年に廃止予定とのこと。@useと@forwardの2種類で代替される。機能はけっこう異なる。

.item {
    margin: 10px;
}
@import "_header.scss";

// もしくは @use "_header.scss";

h1 {
    color: black;
    font-size: 2rem;
}

この2つのファイルをコンパイルすると、下記のCSSが生成される。

.item {
  margin: 10px;
}

h1 {
  color: black;
  font-size: 2rem;
}
/*# sourceMappingURL=main.css.map */

この際、読み込むSCSSファイルの名前の頭にアンダースコアをつけておく。こうしておくと、ファイルがコンパイル対象にならない。

最終的は1つのCSSに統合されてコンパイルされるので、基本的にメインのSCSS以外はアンダースコアをつけておく方が良い。（header.cssが出力されても使用することはないのでファイルの無駄）

ついでに最終行にあるように、コンパイル時にmapファイルが生成される。

これはDevツールなどで確認した際に、どのSCSSファイルに記述されているかを確認することができる便利ファイル。特に害はないので作成時は一緒にサーバへ上げておくと良い。