SASS + Bourbon + Neat でちょっとしたアプリを作ることになりました。手動で SASS をビルドするのは面倒なので、Gulp で変更を監視して自動ビルドする環境を作りましょう。以下はその手順です。
チュートリアル
必要な Gem と npm パッケージをインストールする
gem update --system
gem install sass bourbon neat
npm install --save-dev gulp gulp-plumber gulp-sass node-bourbon
Bourbon と Neat のファイル群をインストールする
プロジェクトのルートディレクトリで以下のコマンドを実行します。
bourbon install
neat install
これにより、各種 mixin が格納された bourbon/ および neat/ ディレクトリが作成されます。
（邪魔なら src/sass/ 配下に移動してもOK）
Gulpfile を設定する
コンパイル元の SASS ファイルが src/sass/*.sass にあり、コンパイル後の CSS ファイルを dist/css/ 配下に出力する場合、以下のような設定になります。
# gulpfile.coffee
gulp = require 'gulp'
plumber = require 'gulp-plumber'
sass = require 'gulp-sass'
bourbon = require 'node-bourbon'
gulp.task 'sass', ->
gulp.src 'src/sass/*.sass'
# Prevent becoming zombie process when build failed
.pipe plumber(
errorHandler: (err) ->
console.log(err.messageFormatted)
this.emit 'end'
)
.pipe sass(
includePaths: require('node-bourbon').with('dist/css/')
)
.pipe gulp.dest 'dist/css/'
gulp.task 'watch', ->
gulp.watch 'src/sass/*.sass', ['sass']
※.pipe plumber() は、SASS の記述エラーでコンパイルできなかった時にファイル監視が停止してしまう不具合を防ぎます。
SASS を書く
# src/sass/main.sass
@import "bourbon/bourbon"
@import "neat/neat"
body
@include outer-container
h1
font-size: golden-ratio(14px, 1)
実行！
# 単発ビルド
gulp sass
# SASS ファイルを検知したら自動ビルド
gulp watch
問題なく設定できていれば、dist/css/main.css に下記の内容のファイルが出力されます。
html {
box-sizing: border-box; }
*, *::after, *::before {
box-sizing: inherit; }
body {
max-width: 68em;
margin-left: auto;
margin-right: auto; }
body::after {
clear: both;
content: "";
display: table; }
h1 {
font-size: 22.652px; }