CSS PR

ページ毎にファイルを分割して管理する方法【SCSS】

記事内に商品プロモーションを含む場合があります

SCSS使うと普通にCSS書くのはめえんどくせー

たまに忘れるので、ちょっと自分用にメモ。
今回はページ毎にSCSSファイルを作成して、最終的に1つのファイル(CSS)にして管理しやすくする方法です。
SCSS1つのファイルで全てのページのソースを書くことも可能ですが、重くなるし、長くなるし、複数人で作業するのにも不便。
そんな時はページ毎にファイルを分割して管理してみるはいかがでしょうか。

 

分割するメリット

ページ数の多い中規模、大規模サイトでは、ファイルを分割しておくことでメンテナンス性が向上します。
Sassは、複数に分割しても1つのCSSにまとめてコンパイルすることができるので管理時は分割ファイルで、サイトへの読み込みは1つのファイルでと割り切って作業できます。
複数のCSSを読み込む必要がないのでファイルの読み込み数も増やすことなく管理のしやすい構成が可能になります。

 

SCSSファイルを作成

SCSSでは、ファイル名の先頭に「_」をつけると分割ファイルとして作成することができます。
今回の様にページ毎に分割する際は必ず「_○○.scss」にしましょう。

 

@importで複数のファイルを読み込む

今回「matome.scss」(ファイル名は任意)に全て読み込むとします。

「matome.scss」に下記コードを記述。

@import "header";
@import "footer";

「_○○.scss」の「_」は省略できるので、「〇〇」内のみ入力します。
上記の読み込みファイル「_header.scss」、「_footer.scss」。

 

あとはコンパイルするだけ!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。