Sassでファイルを分割管理する方法と3つのメリット【@import, パーシャル】

2021年7月20日2022年12月11日

大規模なWeb制作案件になると、CSSのコード量も膨大になりますよね。

パーツごと・役割ごとにCSSファイルを分割することで管理しやすくなりますが、その場合、

読み込み速度の低下（HTTPリクエストが増えるため）
サーバーで管理するCSSファイルが多くなる

といった問題が発生します。

そこで今回は、これらの問題を解決するためのSassのパーシャル機能を紹介します。

パーシャルを使用することで、

作業ファイルをいくつにも分割できる
最終的に1つのCSSファイルにまとめることができる

といったメリットがあり、保守性・可読性が大幅にアップします！

Sassを使う上では欠かせない機能ですので、ぜひ覚えておいてください。

Sassの機能：パーシャル(partial)とは？

パーシャル(partial)は簡単に説明すると分割されたSassファイルで、コンパイル時にCSSファイルが生成されないという特徴があります。

これにより、余分なCSSファイルを生成することなくSassファイルを分割できますね。

headerのスタイルのみを記述した_header.scssや、ボタンのスタイルをまとめた_btn.scssという風に、セクションごと・コンポーネントごとにファイルを分けることができます。

さらにこれらはCSSファイルとして生成されないので、最終的には1つのCSSファイルにまとめることが可能です！

以下でパーシャルを作成する手順を見ていきましょう。

パーシャルを作成してSassファイルを分割する手順

パーシャルを作成するには、以下の3つの手順が必要です。

パーシャルを作成する
パーシャルをひとつのSassファイルにインポートする
コンパイルしてひとつのCSSファイルにまとめる

順番にみていきましょう。

1. パーシャルを作成する

パーシャルを作成するには、ファイル名の一番最初にアンダースコア_を追加するだけです。

例) _header.scss ,_btn.scss

アンダースコアがないとパーシャルとして認識されないので、必ずつけるよう注意してください。

2. パーシャルをひとつのSassファイルにインポートする

全てのパーシャルを1つのファイルにまとめる必要があるので、親のSassファイルを作成します。

style.scssやmain.scssなどの名前が一般的ですね。

このとき、親ファイルにはアンダースコアをつけないでください。

親ファイルが作成できたら、@importを使用してパーシャルを親ファイルにインポートします。

// style.scss内の記述

// 書き方1
@import './_header.scss';
@import './_btn.scss';

// 書き方2
@import './header';
@import './btn';

インポート時には、アンダースコア_と.scssは省略することが可能ですので、好きな方法で記述してください。

3. コンパイルしてひとつのCSSファイルにまとめる

以下にサンプルコードとしてstyle.scss, _header.scss, _btn.scssの3つのファイルを用意しました。

これらをコンパイルするとどうなるかを見てみましょう。

// style.scss
@import './header';
@import './btn';

// _header.scss
.header {
  color: red;
}

// _btn.scss
.btn {
  color: white;
}

親ファイルであるstyle.scssに、_header.scssと_btn.scssという2つのパーシャルをインポートしました。

これらをコンパイルすると、以下のようなCSSファイルstyle.cssが生成されます。

.header {
  color: red;
}
.btn {
  color: white;
}

_header.scssと_btn.scssに記述したコードが、1つのCSSファイルにまとまっていますね。

上記の2つはパーシャルなのでheader.cssやbtn.cssのようなCSSファイルは生成されず、親ファイルのstyle.cssとして生成されました。

次で具体的にどんなメリットがあるかを見ていきましょう。

Sassファイルを分割管理するべき3つのメリット

パーシャル機能でSassファイルを分割するべきメリットは、主に3つあります。

HTTPリクエストを減らせる
管理しやすい
複数人で作業しやすい

ひとつずつ説明していきます。

メリット1. HTTPリクエストを減らせる

最終的に読み込むCSSは1つだけになるので、HTTPリクエストを最小限に抑えられる→サイト表示速度がアップするというメリットがあります。

<head>
  <link rel="stylesheet" href="./style.css">
</head>

パーシャルを使用して親ファイルにインポートすることで、全てのスタイルを1つのCSSにまとめることができます。

こうすることで、読み込むCSSファイルが1つだけになりますね。

もしパーシャルを使用しない場合、以下のように分割されたCSSをそれぞれ読み込む必要があります。

<head>
  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="./header.css">
  <link rel="stylesheet" href="./btn.css">
</head>

これだと3つのHTTPリクエストが発生し、読み込み速度が低下する原因になります。

ここで「CSSのインポート機能でも1つのファイルにまとめられる！」と思った方もいるかと思います。

実際、CSSでも@import url()と記述することでインポートすることができるんですね。

@import url('./header.css');
@import url('./btn.css');

この方法でも以下のように記述することができ、一見HTTPリクエストが1つだけのように見えます。

<head>
  <link rel="stylesheet" href="./style.css">
</head>

しかし実際には@import url()で読み込んだファイル分のHTTPリクエストが発生するため、トータルのリクエスト数は3になります。

さらにCSSの@importはファイルを同時にではなく1つ1つ順番に読み込むため、head内で3つのCSSファイルを読み込むよりも遅くなるため非推奨とされています。

結果的に、Sassのパーシャル機能で分割すればHTTPリクエストを最小限に抑えられるということになりますね！

実際にそれぞれの方法でのサイト表示速度を検証している記事があるので、興味がある方は以下からご覧ください。

【Sassで解決】CSSの@importはどれ…

【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO

メリット2. 管理しやすい

ファイルをいくらでも細分化できるので、管理がしやすくなります。

1つのCSSファイルに全てのスタイルを書くとなると、記述が増えるにつれ何がどこにあるかわからなくなりますよね。

かといってCSSファイルを分割すると、メリット1で説明した通りサイト速度低下につながります…。

Sassのパーシャルを利用することで、余分なCSSファイルを増やさずに細分化することができます！

// Reset CSS
@import 'reset';

// Components
@import 'components/btn';
@import 'components/banner';
@import 'components/container';
@import 'components/pagination';

// Layout
@import 'layout/header';
@import 'layout/main';
@import 'layout/footer';

// pages
@import 'pages/home';
@import 'pages/about';
@import 'pages/contact';

コンポーネント毎・ページ毎などに分けられるので、かなり管理しやすいですね。

1P毎の記述が少なくなる上に、ファイル名でどのスタイルがどこにあるか一目でわかります。

FLOCSSやITCSSなどのCSS設計方法と合わせて使用するとより管理しやすくなるので、興味がある方は調べてみてください。

メリット3. 複数人で作業しやすい

1つのCSSファイルに対して複数人で作業する場合、高確率で競合してしまいますね。

Sassならチーム内で役割分担したうえで各自パーシャルを作成→最後にコンパイルしてまとめることで、競合することなく作業を進めることができます！

// Aさんの作業範囲
@import 'pages/home';
@import 'pages/about';

// Bさんの作業範囲
@import 'pages/company/';
@import 'pages/faq/';

// Cさんの作業範囲
@import 'pages/access';
@import 'pages/contact';

このように事前に役割を決めておくことで、スムーズに作業ができますね。

作業完了後にコンパイルするので、複数人で対応しても最終的には1つのCSSファイルにまとめることができます。