【PR】を含みます。

Webデザイン

【初心者向け】SCSSのパーシャルとは？ファイル分割でメンテナンスを楽にする方法

初心者向け SCSSのパーシャルとは？ファイル分割でメンテナンスを楽にする方法

「SCSSのファイルが増えて管理が大変…」そんな悩みを解決するのがパーシャル！

「_」を使ったファイル分割の方法、@useを活用した管理のコツを初心者向けにわかりやすく紹介します。

SCSSのパーシャルとは？

SCSSのパーシャルとは、小さな単位(各パーツや機能)でスタイルを管理するためのSCSSファイルのことです。

通常のSCSSファイルとは異なり、ファイル名の先頭に「_（アンダースコア）」を付けることで、コンパイル時に直接CSSとして出力されないようになります。

パーシャルの例

以下は変数管理用の_variables.scssをファイル作成しています。

SCSS
Copy
  1. // _variables.scss
  2. $primary-color: red;
  3. $secondary-color: blue;

以下はよく使うスタイルを@mixinで再利用できるようにするために、ミックスイン管理用の_mixins.scssをファイル作成しています。

SCSS
Copy
  1. // _mixins.scss
  2. @mixin flex-center {
  3.   display: flex;
  4.   justify-content: center;
  5.   align-items: center;
  6. }
  8. @mixin responsive($breakpoint) {
  9.   @if $breakpoint == tablet {
  10.     @media (max-width: 768px) { @content; }
  11.   } @else if $breakpoint == mobile {
  12.     @media (max-width: 480px) { @content; }
  13.   }
  14. }

SCSSのファイル分割のメリット

SCSSのファイルを分割することで、以下のメリットがあります。

  • コードが整理されて管理しやすい

  • 不要なコードを減らし、可読性が向上する

  • チーム開発時に役立つ（担当ごと・ブロックごとにファイルを分割可能）

@use と @forward の使い方

SCSSでは@useと@forwardを使うことで、パーシャルを効率的に管理できます。

@use の使い方

@useを使うことで、外部ファイルをインポートできます。

参考としてstyle.scssに各パーシャルをインポートする例を紹介します。

※パーシャルをインポートする際、「_」と「.scss」は不要です。

  /scss
   ├── _mixins.scss
   ├── _variables.scss
   ├── style.scss

例：style.scss

SCSS
Copy
  1. @use "variables";
  2. @use "mixins";
  4. body {
  5.   color: variables.$primary-color;
  6. }

@useを使うと、変数やMixinを明示的に指定しないと使えないため、スコープが整理されやすくなります。

また、エイリアスを使うことで、より簡潔に記述可能です。

SCSS
Copy
  1. @use "variables" as v;
  2. @use "mixins" as m;
  4. body {
  5.   color: v.$primary-color;
  6. }

このようにエイリアスを活用すると、長いモジュール名を省略でき、可読性が向上します。

@import との違い

SCSSには@importというファイルを読み込む方法もありますが、@useとは動作が異なります。

@import はCSSの@importと同じく、読み込むたびにCSSが増える

@importを複数回使うと、同じファイルが何度も読み込まれる可能性があります。

これにより、CSSのサイズが増えてパフォーマンスに悪影響を与えることがあります。

@use は一度だけ読み込まれる

@useを使うと、同じファイルを複数回読み込むことはありません。

さらに、スコープが制限され、読み込んだファイルの変数やミックスインはファイル名.変数名のようにしてアクセスする必要があります。

@forward の使い方

@forwardは、別のSCSSファイルをまとめてエクスポートするための機能です。

参考としてstyle.scssにパーシャルをまとめてインポートする例を紹介します。

  /scss
   ├── _mixins.scss
   ├── _variables.scss
   ├── _index.scss
   ├── style.scss

パーシャルを@forwardを使用して他のファイルからインポートできるようにする(_index.scssにまとめる)。

例：_index.scss

SCSS
Copy
  1. @forward "variables";
  2. @forward "mixins";

例：style.scss

SCSS
Copy
  1. @use "index";
  3. body {
  4.   color: index.$primary-color;
  5. }

これにより、_index.scssを経由して_variables.scssや_mixins.scssの中身を一括管理できます。

ファイル分割の基本構成

SCSSを分割する際、私は以下のようなディレクトリ構成で管理することが多いです。

  /scss
   ├── components/          // 共通の UI コンポーネント（ボタン、カード、ヘッダーなど）
   │   ├── _index.scss     // @forward で components 内の SCSS をまとめる
   │   ├── _button.scss
   │   ├── _card.scss
   │   ├── _footer.scss
   │   ├── _header.scss
   ├── pages/               // ページ固有のスタイル
   │   ├── _index.scss     // @forward で pages 内の SCSS をまとめる
   │   ├── _home.scss      // ホームページのスタイル
   │   ├── _about.scss     // アバウトページのスタイル
   │   ├── _contact.scss   // コンタクトページのスタイル
   ├── utils/               // ユーティリティ（変数、ミックスインなど）
   │   ├── _index.scss     // @forward で utils 内の SCSS をまとめる
   │   ├── _mixins.scss    // ミックスイン
   │   ├── _variables.scss // 変数
   │   ├── _base.scss      // 基本スタイル（リセット、タイポグラフィなど）
   ├── style.scss           // @use で各フォルダの _index.scss を読み込む

プロジェクトの規模が大きい場合は、以下のように拡張することもあります。

  /scss
   ├── base/              // ベーススタイル（リセット・タイポグラフィ）
   │   ├── _index.scss
   │   ├── _reset.scss
   │   ├── _typography.scss
   │   ├── _global.scss
   ├── components/        // 共通の UI コンポーネント
   │   ├── _index.scss
   │   ├── _button.scss
   │   ├── _card.scss
   │   ├── _footer.scss
   │   ├── _header.scss
   ├── layout/            // ページ全体のレイアウト
   │   ├── _index.scss
   │   ├── _grid.scss
   │   ├── _container.scss
   │   ├── _header.scss
   │   ├── _footer.scss
   ├── pages/             // ページ固有のスタイル
   │   ├── _index.scss
   │   ├── _home.scss
   │   ├── _about.scss
   │   ├── _contact.scss
   ├── themes/            // カラーテーマ・ダークモード
   │   ├── _index.scss
   │   ├── _light.scss
   │   ├── _dark.scss
   │   ├── _colors.scss
   ├── utils/             // ユーティリティ（変数・ミックスインなど）
   │   ├── _index.scss
   │   ├── _mixins.scss
   │   ├── _variables.scss
   ├── style.scss         // すべてのファイルを @use で読み込む

各フォルダ内に _index.scss を作成する理由

@forwardを使って一括管理することで、他のファイルで@use 'ディレクトリ名'でインポートできるためです。

※SCSSは自動的に_index.scssを読み込む仕様になってます（@use 'ディレクトリ名'でディレクトリ名/_index.scssが読み込まれる）。

_index.scssを作成しない場合、style.scssにファイルをまとめる際に、すべてのファイルを@useで直接指定する必要があります。

分割したファイルをまとめるときの参考例

以下構造に分割したファイルをまとめてみます。

  /scss
   ├── components/          // 共通の UI コンポーネント（ボタン、カード、ヘッダーなど）
   │   ├── _index.scss     // @forward で components 内の SCSS をまとめる
   │   ├── _button.scss
   │   ├── _card.scss
   │   ├── _footer.scss
   │   ├── _header.scss
   ├── pages/               // ページ固有のスタイル
   │   ├── _index.scss     // @forward で pages 内の SCSS をまとめる
   │   ├── _home.scss      // ホームページのスタイル
   │   ├── _about.scss     // アバウトページのスタイル
   │   ├── _contact.scss   // コンタクトページのスタイル
   ├── utils/               // ユーティリティ（変数、ミックスインなど）
   │   ├── _index.scss     // @forward で utils 内の SCSS をまとめる
   │   ├── _mixins.scss    // ミックスイン
   │   ├── _variables.scss // 変数
   │   ├── _base.scss      // 基本スタイル（リセット、タイポグラフィなど）
   ├── style.scss           // @use で各フォルダの _index.scss を読み込む

各 _index.scss の内容

例：components/_index.scss

SCSS
Copy
  1. @forward "button";
  2. @forward "card";
  3. @forward "footer";
  4. @forward "header";

例：pages/_index.scss

SCSS
Copy
  1. @forward "home";
  2. @forward "about";
  3. @forward "contact";

例：utils/_index.scss

SCSS
Copy
  1. @forward "variables";
  2. @forward "mixins";
  3. @forward "base";

style.scss の内容

SCSS
Copy
  1. @use "utils";       // 変数・ミックスイン・ベーススタイルを読み込む
  2. @use "components";  // UIコンポーネントのスタイルを読み込む
  3. @use "pages";       // ページごとのスタイルを読み込む

これで、@useによって自動的にフォルダ内の_index.scssを読み込むことができます。

各フォルダ内に _index.scss を作成しなかった場合の読み込み方法

各フォルダ内に_index.scssを作成しなかった場合、style.scssでの読み込みは以下のようになります。

SCSS
Copy
  1. @use "utils/variables";
  2. @use "utils/mixins";
  3. @use "utils/base";
  5. @use "components/button";
  6. @use "components/card";
  7. @use "components/footer";
  8. @use "components/header";
  10. @use "pages/home";
  11. @use "pages/about";
  12. @use "pages/contact";

変数や mixin をエイリアス（別名）なしで読み込む方法

utils/_index.scssでvariablesとmixinsを@forwardでまとめて、他のファイルからutilsを@useします。

@useする際にas *を使用することで、変数やmixinを直接指定することができます。

以下はcomponents/_button.scssで変数やmixinを使用するときのサンプルです。

例：utils/_index.scss

SCSS
Copy
  1. // utils/_index.scss
  2. @forward "variables";
  3. @forward "mixins";

例：components/_button.scss

SCSS
Copy
  1. // components/_button.scss
  2. @use "../utils" as *; // エイリアスなしで全ての変数とmixinを使える
  4. .button {
  5.   background-color: $primary-color;
  6.   color: white;
  7.   padding: 10px 20px;
  8.   border-radius: 5px;
  9.   @include flex-center;
  10.   
  11.   &:hover {
  12.     background-color: darken($primary-color, 10%);
  13.   }
  15.   @include responsive(sm) {
  16.     padding: 8px 16px;
  17.   }
  18. }

まとめ

SCSSのパーシャルとファイル分割を活用することで、スタイルを効率的に管理でき、メンテナンスが楽になります。

  • パーシャルはファイル名の先頭に_を付ける

  • @useを使うとスコープが整理される

  • @forwardを使うと複数のファイルをまとめてエクスポートできる

SCSSを適切に分割し、スッキリとしたCSS管理を目指しましょう！

Sassを学習するならこの1冊で充分！

アイコン画像

もみじ

HTMLとCSSの知識があれば、Sassについての必要な知識を身に付けることができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容から管理・運用・設計のやり方もこの1冊で学ぶことができます。

-Webデザイン
-