CSS PR

Sassファイルを分割して管理する方法【SCSS】

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

パーツや役割ごとにSassファイルを分けておくことで、ファイルの管理がしやすくなります。
今回は、複数のSassファイル(scss)を最終的にCSSに出力する際に1つにする方法を紹介します。

Sassファイルを分割して管理する方法

さてではSassの分割して管理する方法を血盟する前にメリットを書いてみます。

分割するメリット

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

SCSSファイル作成

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

設計については「吉本式BEM設計(BEM設計ベース)」さんの「SCSSのファイル設計について Vol.1」などを参考にすると良いかと思います。

複数ファイルを読み込む

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

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

[css]
@import "header";
@import "footer";
[/css]

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

これをコンパイルすると、「matome.css」に全てのCSSが出力されます。

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)