大規模なWeb制作案件になると、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ファイルにまとめる順番にみていきましょう。パーシャルを作成するパーシャルを作成するには、ファイル名の一番最初にアンダースコア_を追加するだけです。,_btn.scssアンダースコアがないとパーシャルとして認識されないので、必ずつけるよう注意してください。パーシャルをひとつのSassファイルにインポートする全てのパーシャルを1つのファイルにまとめる必要があるので、親のSassファイルを作成します。style.scssやmain.scssなどの名前が一般的ですね。このとき、親ファイルにはアンダースコアをつけないでください。親ファイルが作成できたら、@importを使用してパーシャルを親ファイルにインポートします。'./btn';インポート時には、アンダースコア_と.scssは省略することが可能ですので、好きな方法で記述してください。_btn.scssの3つのファイルを用意しました。これらをコンパイルするとどうなるかを見てみましょう。white;}親ファイルであるstyle.scssに、_header.scssと_btn.scssという2つのパーシャルをインポートしました。これらをコンパイルすると、以下のようなCSSファイルstyle.cssが生成されます。white;}_header.scssと_btn.scssに記述したコードが、1つのCSSファイルにまとまっていますね。上記の2つはパーシャルなのでheader.cssやbtn.cssのようなCSSファイルは生成されず、親ファイルのstyle.cssとして生成されました。次で具体的にどんなメリットがあるかを見ていきましょう。Sassファイルを分割管理するべき3つのメリットパーシャル機能でSassファイルを分割するべきメリットは、主に3つあります。HTTPリクエストを減らせる管理しやすい複数人で作業しやすいひとつずつ説明していきます。HTTPリクエストを減らせる最終的に読み込むCSSは1つだけになるので、HTTPリクエストを最小限に抑えられる→サイト表示速度がアップするというメリットがあります。href="./style.css"></head>パーシャルを使用して親ファイルにインポートすることで、全てのスタイルを1つのCSSにまとめることができます。することで、読み込むCSSファイルが1つだけになりますね。パーシャルを使用しない場合、以下のように分割されたCSSをそれぞれ読み込む必要があります。href="./btn.css"></head>これだと3つのHTTPリクエストが発生し、読み込み速度が低下する原因になります。ここで「CSSのインポート機能でも1つのファイルにまとめられる!」と思った方もいるかと思います。url()と記述することでインポートすることができるんですね。url('./btn.css');この方法でも以下のように記述することができ、一見HTTPリクエストが1つだけのように見えます。url()で読み込んだファイル分のHTTPリクエストが発生するため、トータルのリクエスト数は3になります。CSSの@importはファイルを同時にではなく1つ1つ順番に読み込むため、head内で3つのCSSファイルを読み込むよりも遅くなるため非推奨とされています。結果的に、Sassのパーシャル機能で分割すればHTTPリクエストを最小限に抑えられるということになりますね!実際にそれぞれの方法でのサイト表示速度を検証している記事があるので、興味がある方は以下からご覧ください。管理しやすいファイルをいくらでも細分化できるので、管理がしやすくなります。1つのCSSファイルに全てのスタイルを書くとなると、記述が増えるにつれ何がどこにあるかわからなくなりますよね。いってCSSファイルを分割すると、メリット1で説明した通りサイト速度低下につながります...。'pages/contact';コンポーネント毎・ページ毎などに分けられるので、かなり管理しやすいですね。1P毎の記述が少なくなる上に、ファイル名でどのスタイルがどこにあるか一目でわかります。FLOCSSやITCSSなどのCSS設計方法と合わせて使用するとより管理しやすくなるので、興味がある方は調べてみてください。複数人で作業しやすい1つのCSSファイルに対して複数人で作業する場合、高確率で競合してしまいますね。'pages/contact';このように事前に役割を決めておくことで、スムーズに作業ができますね。作業完了後にコンパイルするので、複数人で対応しても最終的には1つのCSSファイルにまとめることができます。【まとめ】Sassのパーシャル機能でファイルを分割管理しよう!Sassのパーシャル機能でファイルを分割管理する方法と、そのメリットについて説明しました。HTTPリクエストを減らせる管理しやすい複数人で作業しやすいまとめると、上記のようなメリットがあります!サイト表示速度アップ、保守性・メンテナンス性の向上、さらにチームでの開発がしやすいという点で、制作会社でもよく使用されているので、Web制作をしている方ならぜひ学んでおいてほしいです。Sassを学習したいという方は、私が実際に受講したおすすめのUdemyコースがあるので、以下の記事をぜひチェックしてみてください。最近はHTML・CSSなど、Web制作の勉強をしている人が増えてきましたね。Progateやドットインストールといったサービスのおかげで、基礎知識を身につけるのは簡単になっ...記事が役に立ったらサポートしてくださいWeb制作に関する記事案を募集中!Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。要望が多かったものは解説記事を作成します。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。