GulpのSassで分割したファイルをまとめてimportする

Sassで分割したファイルimportする際に、まとめて指定する方法を試してみます。

設定方法

今回は例として、以下のようなディレクトリ構造で試してみます。

• assets
  • css
• sass
  • foundation
    • _base.scss
    • _function.scss
    • _normalize.scss
  • layout
    • _footer.scss
    • _header.scss
    • _layout.scss
  • object
    • component
      • _btn.scss
      • _grid.scss
      • _list.scss
    • project
      • _about.scss
      • _top.scss
    • utility
      • _br.scss
      • _clearfix.scss
      • _margin.scss
      • _typography.scss
  • style.scss

sassディレクトリ内の分割した各ファイルをstyle.scssでimportして、assets/css/以下に出力する想定です。

実際に設定してみます。
まずはコマンドプロンプトを開いて、プロジェクトディレクトリに移動します。

cd 【プロジェクトディレクトリ】

package.jsonを作成します。

npm init

今回使用するgulp、gulp-sass、gulp-sass-globをインストールします。

npm install gulp gulp-sass gulp-sass-glob --save-dev

プロジェクトルートにgulpfile.jsを作成して、以下のように記述します。

gulpfile.js

var gulp     = require('gulp'),
    sass     = require('gulp-sass'),
    sassGlob = require('gulp-sass-glob');

gulp.task('sass', function () {
  return gulp.src(['./sass/**/*.scss', '!./sass/**/_*.scss'])
  .pipe(sassGlob())
  .pipe(sass({
    outputStyle : 'expanded'
  }))
  .pipe(gulp.dest('assets/css/'));
});

これで設定は完了です。
以下のコマンドを実行することで、Sassファイルがコンパイルされるようになりました。

gulp sass

次に実際にimportの記述をしてみます。
特にまとめないで記述した場合、style.scssは以下のような内容になります。

style.scss

@import "foundation/function";
@import "foundation/normalize";
@import "foundation/base";

/* ========================================
  layout
======================================== */
@import "layout/layout";
@import "layout/header";
@import "layout/footer";

/* ========================================
  component
======================================== */
@import "object/component/btn";
@import "object/component/grid";
@import "object/component/list";

/* ========================================
  project
======================================== */
@import "object/project/top";
@import "object/project/about";

/* ========================================
  utility
======================================== */
@import "object/utility/clearfix";
@import "object/utility/margin";
@import "object/utility/typography";
@import "object/utility/br";

まとめて記述した場合は以下のようになります。

style.scss

@import "foundation/function";
@import "foundation/normalize";
@import "foundation/base";

/* ========================================
  layout
======================================== */
@import "layout/*";

/* ========================================
  component
======================================== */
@import "object/component/*";

/* ========================================
  project
======================================== */
@import "object/project/*";

/* ========================================
  utility
======================================== */
@import "object/utility/*";

注意点として、特定の順番で読み込ませたい場合はまとめない方がよいです。

例えばlayoutディレクトリやcomponentディレクトリの場合、ディレクトリ内の各ファイルは別ファイルのスタイルを上書きしていないため、読み込む順番が入れ替わっても問題ありません。
しかしfoundationディレクトリ内の場合、_function.scssでSass全体の設定、_normalize.scssでデフォルトのスタイル設定、_base.scssでベースのスタイル設定、という順番で読み込ませたいので、まとめないようにしています。
　

【参考サイト】

• gulp-sass-glob – npm