もくじ
「SCSSのファイルが増えて管理が大変…」そんな悩みを解決するのがパーシャル！
「_」を使ったファイル分割の方法、@useを活用した管理のコツを初心者向けにわかりやすく紹介します。
SCSSのパーシャルとは？
SCSSのパーシャルとは、小さな単位(各パーツや機能)でスタイルを管理するためのSCSSファイルのことです。
通常のSCSSファイルとは異なり、ファイル名の先頭に「_（アンダースコア）」を付けることで、コンパイル時に直接CSSとして出力されないようになります。
パーシャルの例
以下は変数管理用の_variables.scssをファイル作成しています。
// _variables.scss$primary-color: red;$secondary-color: blue;
以下はよく使うスタイルを@mixinで再利用できるようにするために、ミックスイン管理用の_mixins.scssをファイル作成しています。
// _mixins.scss@mixin flex-center {display: flex;justify-content: center;align-items: center;}@mixin responsive($breakpoint) {@if $breakpoint == tablet {@media (max-width: 768px) { @content; }} @else if $breakpoint == mobile {@media (max-width: 480px) { @content; }}}
SCSSのファイル分割のメリット
SCSSのファイルを分割することで、以下のメリットがあります。
コードが整理されて管理しやすい
不要なコードを減らし、可読性が向上する
チーム開発時に役立つ（担当ごと・ブロックごとにファイルを分割可能）
@use と @forward の使い方
SCSSでは@useと@forwardを使うことで、パーシャルを効率的に管理できます。
@use の使い方
@useを使うことで、外部ファイルをインポートできます。
参考としてstyle.scssに各パーシャルをインポートする例を紹介します。
※パーシャルをインポートする際、「_」と「.scss」は不要です。
/scss ├── _mixins.scss ├── _variables.scss ├── style.scss
例：style.scss
@use "variables";@use "mixins";body {color: variables.$primary-color;}
@useを使うと、変数やMixinを明示的に指定しないと使えないため、スコープが整理されやすくなります。
また、エイリアスを使うことで、より簡潔に記述可能です。
@use "variables" as v;@use "mixins" as m;body {color: v.$primary-color;}
このようにエイリアスを活用すると、長いモジュール名を省略でき、可読性が向上します。
@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
@forward "variables";@forward "mixins";
例：style.scss
@use "index";body {color: index.$primary-color;}
これにより、_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
@forward "button";@forward "card";@forward "footer";@forward "header";
例：pages/_index.scss
@forward "home";@forward "about";@forward "contact";
例：utils/_index.scss
@forward "variables";@forward "mixins";@forward "base";
style.scss の内容
@use "utils"; // 変数・ミックスイン・ベーススタイルを読み込む@use "components"; // UIコンポーネントのスタイルを読み込む@use "pages"; // ページごとのスタイルを読み込む
これで、@useによって自動的にフォルダ内の_index.scssを読み込むことができます。
各フォルダ内に _index.scss を作成しなかった場合の読み込み方法
各フォルダ内に_index.scssを作成しなかった場合、style.scssでの読み込みは以下のようになります。
@use "utils/variables";@use "utils/mixins";@use "utils/base";@use "components/button";@use "components/card";@use "components/footer";@use "components/header";@use "pages/home";@use "pages/about";@use "pages/contact";
変数や mixin をエイリアス（別名）なしで読み込む方法
utils/_index.scssでvariablesとmixinsを@forwardでまとめて、他のファイルからutilsを@useします。
@useする際にas *を使用することで、変数やmixinを直接指定することができます。
以下はcomponents/_button.scssで変数やmixinを使用するときのサンプルです。
例：utils/_index.scss
// utils/_index.scss@forward "variables";@forward "mixins";
例：components/_button.scss
// components/_button.scss@use "../utils" as *; // エイリアスなしで全ての変数とmixinを使える.button {background-color: $primary-color;color: white;padding: 10px 20px;border-radius: 5px;@include flex-center;&:hover {background-color: darken($primary-color, 10%);}@include responsive(sm) {padding: 8px 16px;}}
まとめ
SCSSのパーシャルとファイル分割を活用することで、スタイルを効率的に管理でき、メンテナンスが楽になります。
パーシャルはファイル名の先頭に
_を付ける@useを使うとスコープが整理される@forwardを使うと複数のファイルをまとめてエクスポートできる
SCSSを適切に分割し、スッキリとしたCSS管理を目指しましょう！
Sassを学習するならこの1冊で充分！
もみじ
HTMLとCSSの知識があれば、Sassについての必要な知識を身に付けることができます。
実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容から管理・運用・設計のやり方もこの1冊で学ぶことができます。