Sassファイルの管理方法。ディレクトリ構造（フォルダ・ファイル構成）

Web制作でSassを導入してCSSを生成していく中、ディレクトリ構造（フォルダ・ファイル構成）をしっかり作っておくと、Sass(scss)ファイルの管理がしやすくなります。

Sassを複数ファイルとして分割管理することで、編集する箇所へのアクセスがスムーズに行えるので、プロジェクトの大きさによっては、作業効率を上げることもできます。

ここでは、Sassファイルを分割管理する方法について見ていきます。
Sassの記法はいくつかありますが、公式も推奨しているDart Sass（ダートサス）の記法で、記述方法も含めてご紹介していきます。
今後は、Dart Sassベースで新機能が追加されていきますので、覚えておくと良いでしょう。
また後半には、Dart Sassの自動コンパイルについても少し触れていきます。

Sassファイルの分割管理

Sass(scss)ファイルの分割管理を、サンプルを交えてご紹介していきます。

Sassファイルを管理するディレクトリ内にて、コンパイルしてCSSを生成するベースとなるstyle.cssのほか、いくつかの役割でファイルを用意します。

分割したファイルは、style.scssに@useで呼び出します。
分割で管理するファイルは、ファイル名の先頭に「_（アンダースコア）」を入れます。
このように、アンダースコアで細分化したファイルを「partial（パーシャル）」と言います。

_main.scss
_responsive.scss

「_（アンダースコア）」を付けないと、Sass(scss)ファイルをコンパイルした際に、パーシャルファイルごとにCSSファイルが生成されてしまいます。

いろんな設定に関するファイルがある場合は、「config」のように階層を作って管理してもOKです。
@useで呼び出す時は、style.scssからの相対パスとなります。

@use "config/fonts";
@use "config/variables";

style.scssに@useで呼び出す順番は、コンパイルして生成するCSSへの、上からの記述順で呼び出しましょう。

いくつかの分割したファイルを、@useで呼び出した順番で見ていきます。

_settings.scssは、CSSになんらかの設定を記述するファイルになります。
例えば、WordPressの場合はテーマ情報などを記述していきます。

_reset.scssは、リセットCSSを記述するファイルになります。
各Webブラウザのデフォルトのスタイルが影響しないよう、CSSでは必要な設定でしょう。

Sassファイルの分割管理（_settings.scss、_reset.scss）

_fonts.scssは、Webフォントを利用していく際に、@font-faceでの設定などをまとめて記述しておくファイルになります。

_variables.scssは、変数で値を管理するにあたり、変数をまとめておくファイルになります。
Webサイトのベースカラーやアクセントカラーなどでは、変数を定義して活用していくことでしょう。
コンパイル時に変数が展開されますので、編集時などにはメンテナンス性が上がります。

Sassファイルの分割管理（_fonts.scss、_variables.scss）

_mixin.scssは、CSSでスタイルを定義しておいて、使いまわせるようにまとめたファイルになります。
Webデザインでの共通のボタンのデザインなどは、mixinで定義しておくといいでしょう。
_base.scssは、Webサイト全体のベースになるスタイルや、リセットCSSでリセットしたスタイルの調整をするファイルになります。

また、@useではファイル名を記述して、変数やmixinを使用していかなければなりません。
ファイル名にas節で独自の名前空間をつけて呼び出します。
名前空間はわかりやすいように、変数だったり「as v」、mixinだったら「as m」とするといいでしょう。
フォントでも変数等で定義している場合は、「as f」のように名前空間をつけましょう。

例として、_variables.scssで定義されている変数を利用するときは、以下のように記述して呼び出します。

font-family: v.$base_font;

_main.scssは、通常のWebデザインを構築していくファイルになります。
ここでは、スマートフォンからタブレット端末、PCとすべてに適応するスタイルとして、モバイルファーストの記述例でご紹介しています。

_responsive.scssは、メディアクエリを使用して、タブレット端末の幅やPCの幅と、デバイス幅が大きくなるにつれて適応されるスタイルを記述するファイルになります。

_main.scssでも_responsive.scssでも、変数やmixinを使っていくので、@useで名前空間をつけて呼び出します。

Sassファイルの分割管理（_main.scss、_responsive.scss）

ここでは、mainとresponsiveとファイルを分けましたが、メディアクエリをネストで記述していくのであれば、ファイルを分割する必要はなく、style.scssに記述していけばOKです。

ネストでメディアクエリを記述していくと、おそらくコンパイル後は少しだけ行数が増えて、CSSのファイルサイズも少しだけ大きくなるかと思います。
ですが、minified（圧縮版）のstyle.min.cssなどを作成すれば、この問題は解決でしょう。

ここまで、Dart Sassの記法でご紹介していますが、
Dart Sassで記述したSass（scss）ファイルは、Visual Studio Codeの拡張機能を使うことで、手軽に自動コンパイルすることができます。
ちなみに、ベンダープレフィックスも自動で対応してくれます。

Visual Studio Codeをまだ利用されていない方は、無料で高機能とMicrosoft製の人気のコードエディタですので、開発環境として使っていくといいでしょう。今回のサンプルでも利用しているコードエディタです。

拡張機能の使い方については、以下の記事でご紹介しています。

↓　↓　↓

DartJS Sass Compiler and Sass WatcherでSassを自動コンパイル

上記の拡張機能でSassファイルを自動コンパイルすると、自動でminified（圧縮版）のstyle.min.cssを生成してくれます。
HTMLでは、圧縮・軽量化したCSSファイルを読み込むようにすると良いでしょう。

複数ファイルを一括管理する時の注意点

Sassファイルを分割管理している時に注意しておきたいのが、「_import.scss」のようなファイルで複数ファイルを一括管理して、メインのstyle.scssに@useで読み込む時です。
@useでのSassファイルの読み込みは、そのファイルのみでの使用となり、変数や関数、mixinなどは、コンパイルして生成したstyle.scssには反映されずエラーとなります。

そうした場合は、@forwardを使います。
@forwardを使うことで、呼び出すファイルにも変数や関数が見えるようにすることができます。