Sassでファイルを分割し、CSSを効率的に管理するパーシャルという機能を解説します。
パーシャルと使用することで、CSSを機能や目的ごとに効率的に整理し、コードの再利用性を高めることができます。
これにより、プロジェクト全体の保守性が向上し、開発プロセスがスムーズになります。
なお、SassをCSSにコンパイルするやり方については以下の記事で解説していますので、Sassのコンパイルのやり方がわからない場合は、こちらから環境構築を行なってください。
INDEX
Sassのパーシャルとは？
パーシャルとは、CSSファイルをパーツや機能ごとに分割して管理するSassの機能です。
これにより、CSSをより効率的に管理し、コードの再利用性と保守性を向上させることができます。
パーシャルの主なメリットは以下の通りです。
- コードの再利用性: パーシャルを使用することで、共通のスタイルや機能を複数の場所で簡単に再利用することができます。
- メンテナンス性の向上: パーシャルを使用すると、コードをより小さなブロックに分割し、個別にメンテナンスすることができます。これにより、プロジェクト全体の保守性が向上します。
- ファイルの整理: 大規模なプロジェクトでは、スタイルシートが複雑になりがちです。パーシャルを使用することで、ファイルをより管理しやすく整理することができます。
また、パーシャルでは@useと@forwardを使用して、スタイルシートを分割し、読み込みを行います。
これにより、依存関係の明確化や不必要なスタイルの読み込みを防ぐことができます。
それでは実際にパーシャルで開発を行ってみましょう。
Sassファイルで分割されたファイルはモジュールと呼ばれ、それぞれが特定の機能やスタイルに対応して管理されます。
スタイルシートのファイル分割
まずは、基本的なCSS（.scss）ファイルをパーツや役割ごとに分割して管理する方法について解説します。
CSS（.scss）を分割して管理するには、@useを使用することで簡単に行うことができます。
それでは、実際にパーシャルを行なってみましょう。
ファイルの準備
初めに、プロジェクトのファイルを作成して準備を整えましょう。
今回は、以下のようにsrc/stylesディレクトリ内に、.scssファイルを配置する構造で進めていきます。
htdocs
└dist/
└css/（Sassのコンパイル先のディレクトリ）
└src/
└styles/
└style.scss
└_button.scss
└_heading.scss分割して管理するCSS（.scss）ファイルには、ファイル名の先頭に_をつけます。
読み込む用のCSS（.scss）ファイルはstyle.scssとしました。
ファイルを分割する際には、ファイル名の先頭に_を付けます。
この_を付けることで、SCSSファイルからCSSファイルにコンパイルする際に、コンパイルするファイルから除外される役割があります。
また、_を付けることで、そのファイルがパーシャルファイルであることを示す目印にもなります。
パーツや役割ごとにCSSファイルを分割
分割したCSS（.scss）ファイルに、それぞれ適当なCSSを追加してください。
今回はサンプルとして、以下のようにCSSを追加しました。
.button {
cursor: pointer;
text-align: center;
}.heading {
font-weight: 700;
}分割したファイルを読み込む
src/styles/style.scssファイルで、上記の分割したファイルを読み込みます。
以下のように@useを使って、分割したファイルを相対パスで読み込みます。
読み込む際は、ファイル名の先頭の_と、.scss拡張子は省略することができます。
@use 'button';
@use 'heading';この状態で、src/styles/style.scssファイルをコンパイルして、分割したCSS（.scss）ファイルの中身が反映されたCSSファイルが生成されたら成功です。
indexでレイヤーごとにスタイルシートを管理
次にindexを使った、グループごとに効率的にCSS（.scss）ファイルを管理する方法について解説します。
近年のWeb制作では、FLOCSSなどの複数のレイヤー構造でCSSを管理する手法が一般的になってきています。
FLOCSSでは以下のような5つのレイヤー（グループ）に分けて、スタイルシートを管理することで、再利用性や拡張性を高めています。
- Foundation
- Layout
- Object/Component
- Object/Project
- Object/Utility
このように、それぞれの役割などのレイヤー（グループ）でスタイルシートを管理する場合は、indexを使用することで、さらに管理が楽になります。
ファイルの準備
それでは、プロジェクトのファイルを作成して準備を整えましょう。
今回は、以下のようにsrc/stylesディレクトリ内に、componentとpageディレクトリの2つのレイヤー（グループ）で構造されたプロジェクトとして進めていきます。
componentとpageのレイヤーの役割としては以下の通りです。
component：ボタンなどの、全てのページで使いまわすモジュールpage：トップページなど、ページ固有のスタイル
htdocs
└dist/
└css/（Sassのコンパイル先のディレクトリ）
└src/
└styles/
└style.scss
└component/
└_index.scss
└_button.scss
└_heading.scss
└page/
└_index.scss
└_home.scss
└_contact.scssそれぞれのレイヤー（ディレクトリ）の中の_index.scssファイルが、レイヤー内のパーシャルファイルを読み込んで、レイヤーごとに管理する役割を担っています。
パーツや役割ごとにCSSファイルを分割
分割したCSS（.scss）ファイルに、それぞれ適当なCSSを追加してください。
.button {
cursor: pointer;
text-align: center;
}.heading {
font-weight: 700;
}.home {
background-color: #fff;
}.contact {
background-color: #000;
}レイヤーごとにindexを作成する
今回の主役である_index.scssファイルに、それぞれのレイヤーごとにパーシャルファイルを設定します。
@use 'button';
@use 'heading';@use 'home';
@use 'contact';分割したファイルを読み込む
src/styles/style.scssファイルで、上記の分割したファイルを読み込みます。
今回はレイヤーごとにパーシャルファイルを管理しているので、直接ファイルに対してパスを設定するのではなく、ディレクトごとにパスを設定します。
_index.scssファイルでレイヤーのパーシャルファイルを管理している場合は、@useでパスを設定する際、ファイル名のindexを省略することができます。
@use 'component';
@use 'page';この状態で、src/styles/style.scssファイルをコンパイルして、分割したCSS（.scss）ファイルの中身が反映されたCSSファイルが生成されたら、成功です。
変数・Mixin・関数のファイル分割
次にSass特有の、変数・Mixin・関数などのモジュールを定義したファイルを分割して、読み込む方法を解説します。
なお、今回はSassのパーシャル（ファイル分割）の解説がメインになる為、変数・Mixin・関数の使い方の説明は省略させていただきます。
ファイルの準備
それではプロジェクトのファイルを作成して準備を整えましょう。
今回は以下のディレクトリ構造で進めていきます。
htdocs
└dist/
└css/（Sassのコンパイル先のディレクトリ）
└src/
└styles/
└style.scss
└_function.scss
└_mixin.scss
└_variable.scss変数・Mixin・関数も同様にファイル名の先頭に_をつけてパーシャルします。
それぞれのパーシャルファイルの役割は以下の通りです。
_function：計算式などの関数_mixin：ミックスイン_variable：配色などの変数
変数・Mixin・関数ファイルを分割
それぞれのパーシャルファイルに、以下のようにそれぞれ適当な設定を追加します。
@function rem($size) {
@return ($size / 16) + rem;
}@mixin inner {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}$gray: #ccc;
$black: #333;変数・Mixin・関数をファイルを読み込む
先ほど作成したモジュールを@useを使って読み込みます。
ファイル名の先頭の_と.scss拡張子は省略して記載します。
変数・Mixin・関数をパーシャルで別ファイルからモジュールを使用する場合は、ファイル名を指定してモジュールを呼び出します。
Sassで機能ごとに分割したグループをモジュールと呼びます。
@use 'function';
@use 'mixin';
@use 'variable';
p {
font-size: function.rem(16);
}
div {
@include mixin.inner
}
h1 {
color: variable.$black;
}モジュールのファイル名を省略して読み込む
上記のように、毎回モジュールを使用する際に、モジュールのファイル名を記載するのは効率的ではありません。
そのような場合はasを使用して、モジュール名を好きな文字に置き換えて省略することが可能です。
以下のように@useで読み込んだファイル名の後にasで好きな名前を定義します。
今回はファイル名の頭文字を定義しました。
モジュールの呼び出し方法も同様に、asで定義した名前を使用します。
このようにasを使用することでコードの可読性と保守性が向上し、効率的な開発を行うことができます。
@use 'function' as f;
@use 'mixin' as m;
@use 'variable' as v;
p {
font-size: f.rem(16);
}
div {
@include m.inner
}
h1 {
color: v.$black;
}indexで変数・Mixin・関数をまとめて管理
最後に、indexを使用して、変数・Mixin・関数を一つのグループとして管理する方法について解説します。
先ほどの方法で、変数・Mixin・関数などのモジュールをそれぞれ別々に読み込み、それぞれにasで名前を定義することも可能です。
しかし、これらのモジュールは通常、全てのページで共通して使用されるため、一つのファイルとして管理する方がメンテナンス性も上がり、効率的です。
それでは、変数・Mixin・関数などのモジュールファイルを一つのファイルとして読み込んでみましょう。
ファイルの準備
それではプロジェクトのファイルを作成して準備を整えましょう。
今回は以下のようにsrc/stylesディレクトリ内に、settingディレクトリを作成して、その中に変数・Mixin・関数などのモジュールファイルを配置した構造で進めていきます。
htdocs
└dist/
└css/
└src/
└styles/
└style.scss
└setting/
└_index.scss
└_function.scss
└_mixin.scss
└_variable.scssそれぞれのレイヤーの中の_index.scssファイルが、レイヤー内のパーシャルファイルを読み込んで、レイヤーごとに管理する役割を担っています。
変数・Mixin・関数をindexで読み込む
_index.scssで変数・Mixin・関数などのモジュールを読み込みます。
変数・Mixin・関数などをグループで管理する際は@forwardでファイルを読み込みます。
@forward 'function';
@forward 'mixin';
@forward 'variable';@forwardの代わりに@useを使用するとエラーが発生します。
変数・Mixin・関数のグループを呼び出して使用する
最後に_index.scssで管理したディレクトリを、@useで呼び出して完成です。
変数・Mixin・関数をindexを使ってグループで管理している場合は、asで一つだけの名前を定義して、全てのモジュールを使用することが可能です。
@use 'setting' as s;
p {
font-size: s.rem(16);
}
div {
@include s.inner;
}
h1 {
color: s.$black;
}このようにindexと @forward を使用することで、変数、Mixin、関数などのモジュールを共有することができ、コードのメンテナンス性が向上し、効率的に利用することができます。
まとめ
以上で、Sassのパーシャルを活用した効率的なスタイルシート管理方法の解説となります。
パーシャルは、変数、ミックスイン、関数、スタイルルールなど、さまざまなSass要素を一元管理するための優れた手法です。
パーシャルを適切に活用することで、Sassプロジェクトの開発速度を向上させ、プロジェクトをより効率的に管理し、コードの再利用性を高めることができます。
是非、パーシャルの活用方法を習得し、効果的なSassの開発に役立ててください。
