2021/01/03 （最終更新日：2021/10/10）

Sass（scss）のパーシャルファイルの使い方【globで一括読み込み】

Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ

※本サイトはアフィリエイト広告を利用しています。

【Sassのパーシャルファイルについて知りたい人】

「Sassのパーシャルファイルについて、基礎から応用まで詳しく知りたい。」

こういった方向けの記事です。

本記事の内容

Sass（scss）のパーシャルファイルとは？
scssのパーシャルファイルの読み込み方を解説【一般的な方法】
scssのパーシャルファイルを一括で読み込む方法【globを使用】

この記事を書いている僕は、
過去にWeb制作会社で
Sassのコードを書く
エンジニアをしていました。

そんな僕が今回、
Sassのパーシャルファイルの
基礎から応用までを
分かりやすくまとめました。

この記事を読み終わる頃には
パーシャルファイルに関することは
バッチリになっていること間違いなしです。

Sass（scss）のパーシャルファイルとは？

まずは
パーシャルファイルについて
簡単に説明をしておきます。

パーシャルファイルとは、
コンポーネントごとに
細分化したファイルのことです。

ファイルの分け方は人によりますが、
CSSの設計手法の
FLOCSS（フロックス）
に基づいた分け方が有名です。

ちなみにFLOCSSとは、

F…Foundation（基礎部分の記述のファイル群）
L…Layout（レイアウトに関する記述のファイル群）
O…Object（共通パーツに関する記述のファイル郡）
CSS

ざっくり上記のように、
各ファイル郡の頭文字と
CSSを略した名前の設計手法です。

今回は
CSS設計に関しては触れないので、
詳しく知りたい方は
下記の書籍を参考にしてください。

オススメ書籍

CSS設計完全ガイド

【CSS設計完全ガイド】

Amazon Kindle

さて、
話をFLOCSSに戻しまして、
この手法を用いた
ファイルの分け方の一例が
下記のとおりです。

Foundation …「_reset.scss」,「_mixin.scss」などの基礎のファイル群
Layout …「_header.scss」,「_footer.scss」などの共通のレイアウトの〜
Object …「_btn01.scss」,「_btn02.scss」などのパーツ毎の〜

このように、
各要素や役割ごとに
ファイルを細分化したものを
パーシャルファイルと呼びます。

この細分化したファイルを
１つのファイルに読み込んで使うのが
パーシャルファイルの一般的な使い方です。

ここで
気付いた方もいるかもですが、
パーシャルファイルの
ファイル名の先頭には
アンダースコア（ _ ）を付けます。

これを付けないと、
コンパイルした際に
このパーシャルファイルごとに
CSSファイルが生成されてしまう
ので注意してください。

scssのパーシャルファイルの読み込み方を解説【一般的な方法】

ここからは、
パーシャルファイルの
一般的な読み込み方法を解説します。

パーシャルファイルを
読み込む際には、
読み込み先のファイルに
『@import』を用いた記述をします。

それが下記のとおり。

@import "読み込みたいファイルのパス";

ファイルのパスの書き方には、
下記のポイントがあります。

ファイル名の先頭のアンダースコア（ _ ）を省略可能
ファイルの拡張子（.scss）も省略可能

上記のルールに従って、
『foundation』フォルダの中に
『_reset.scss』がある
と仮定して書いてみると、
下記のようになります。

@import "foundation/reset";

省略できるコードはなるべく省略
がベストプラクティスなので、
下記のような書き方は
しないようにしましょう。

@import "foundation/_reset.scss";

scssのパーシャルファイルを一括で読み込む方法【globを使用】

先ほど紹介した
パーシャルファイルの読み込み方だと
ファイルが増えるたびに
そのファイルを読み込むコードを
書かなくてはならず面倒です。

ですが、
globというものを使うと
ファイルのパスを毎回指定しなくても
一括で読み込んでくれて
とても便利なので
その方法をご紹介します。

ちなみに
こちらの方法はgulpを使うので、
導入がまだ済んでいない方は
下記の記事を参考に
インストールをしてください。

gulpの導入が済んだら、
いよいよglobを導入いきます。

大まかな流れが下記のとおりです。

gulp-sass-globパッケージをインストール
gulpfile.jsにコードを追記

globの導入手順①：gulp-sass-globパッケージをインストール

まず、
gulp-sass-globパッケージ
をインストールします。

ターミナルを開き、
下記のコマンドを実行して下さい。

npm i --D gulp-sass-glob

globの導入手順②：gulpfile.jsにコードを追記

インストールが出来たら、
gulpfile.jsに記述を追加していきます。

先ほど紹介した
記事の通りに進めると、
現在のgulpfile.js内の記述は
下記のようになっているかと思います。

【gulpfile.js】

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');

gulp.task('sass', function() {
	return gulp.src('./sass/**/*.scss')
		.pipe(plumber({errorHandler: notify.onError(
			"Error: <%= error.message %>"
		)}))
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
	gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

上記のコードに、
先ほど読み込んだパッケージの
読み込みなどの記述をすると、
下記のようになります。

【gulpfile.js】

const gulp = require('gulp');
const sass = require('gulp-sass');
const sassGlob = require('gulp-sass-glob'); //「gulp-sass-glob」を読み込み
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');

gulp.task('sass', function() {
	return gulp.src('./sass/**/*.scss')
		.pipe(plumber({errorHandler: notify.onError(
			"Error: <%= error.message %>"
		)}))
		.pipe(sassGlob()) // ここに追記
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
	gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

これで設定は完了です。
（※gulpを起動している場合は再起動を。）

いま読み込んだglobを使えば、
下記のような記述が出来るようになります。

【style.scss】