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; }

参考