この記事では、Sassのファイル分割の方法をわかりやすく解説しています。
大元のstyle.scssに下層ページのcssをつらつらと書いていくと、絶対何かの間違いで他のページのレイアウト崩れが起こるだろうし、保守性を高めるためにもSassファイルを分割しておきたいなぁ。
ということで、画像も用いながら手順を記していきたいと思います。
前提
Sassのファイル分割は@importが主流で使われてきましたが今後@importは廃止され、@useが主流になります。
ファイル分割の際は、必ず@useを使用するようにしましょう！
ファイル構造の確認と分割
私はこんなファイル構造でやってみました。
色々とscssファイルがありますが、それぞれ何を表すのかと言うと・・・
共通パーツ、変数、mixin定義、ページごと、という感じでscssを分けています。
それぞれのファイルに記述すること
大元のstyle.scssに記述すること
以下のように、読み込む_〇〇.scssを全て書き出していきます。
記述の仕方は@use "ファイル名( _とscssを除く )"です。
変数を定義した_variable.scssに記述すること
以下のように、変数のみを入れています。
mixinを定義した_mixin.scssに記述すること
こちらにはbreakpointの定義を記述しています。
共通パーツやページ毎の_〇〇.scssに記述すること
共通パーツや各ページ内では、上で定義した変数やmixinを使用しているので、冒頭に @use "variable", @use "mixin" でファイルを読み込んでいます。
そして、その後つらつらと記述しているcssでvariableの変数を使うよ、mixinの定義を使うよ！と以下のように該当部分に追記する必要があります。
冒頭でファイルを読み込めば自動的にそのscss内でmixinや変数が変換されると勘違いしており、なんでコンパイルされへんのやー！！としばらく悩んでいましたが、使用している箇所に都度variable.やmixin.を書いていかなければいけなかったみたいです。 ちょっと面倒ですが、保守性を高めるためには仕方がない作業です。
上記の記述が抜けている場合、きちんとエラーで教えてくれるので、記述漏れの箇所もすぐ特定できます。
エラーが全て解消されればコンパイルされ、以下のようにcssフォルダ内にstyle.cssがまるっと出力されます！！
注意事項
_〇〇.scssを編集していた時に、Liveserverの画面が更新され全くcssがあたっていないページが表示されめちゃくちゃ焦りましたが、style.scssを保存したらまたコンパイルされ、cssが当たっているページに切り替わりました。
アンダーバー付きのファイルはコンパイルの発動条件には含まれない、という性質を持っているからでしょうか。。。
あれ、cssがあたらなくなった！！なんで！？となったら、大元のstyle.scssを保存して再度コンパイルしてみてください。
急にcssがあたらなくなり、この世の終わりかと思うくらいの絶望感を一瞬味わいましたｗ
まとめ
自分の理解力が足りず、ファイル分割だけで丸2日悩みました。夢にも出てきましたｗ
解決のためにアドバイスを下さったメンターさんに感謝！！！この記事が同じような悩みを持っている方のお役に立ちますように。
