いろいろ試した結果、次の node-sass を使う方法が最も速くおすすめです。
node-sass グローバル環境にインストールします。(どこのディレクトリにいても使用できるようになります)
npm install -g node-sass
gulp-sass をローカル環境にインストールします。
めんどくさい方は こちらから一式ファイルをダウンロードしてください。
npm install gulp-sass --save-dev
gulpfile.js は 以下のようなファイルで作成します。
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./html/assets/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({})
.on('error', sass.logError)
)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./html/assets/css'));
});
Package Controlからインストールできる SASS Build は Rubyのsass を使用するので動作が遅い。 そこで、手動で gulp-sass を使用するように手動でビルドを作成します。
ファイル名は SASS.sublime-build など好きなのをつけてください。
拡張子は .sublime-build から変更しないこと 。
path に 自分の環境の node-sass のパスを記述します。
{
"cmd" : ["gulp sass"],
"selector" : "source.scss,source.sass",
"shell" : true,
"working_dir": "$project_path" ,
// パスを明示的に設定する場合はこちらを設定する
"osx": {
"path": "$HOME/.nodebrew/current/bin/node-sass:$PATH"
},
}
これでビルドシステムを「SASS」にしてビルド実行で sass → css 変換が行われます。
SublimeOnSaveBuild
をインストールします。 これで自動ビルドが実行されます。
なお、 gulp を使わずにコンパイルしたい場合は
node-sass ./scss/style.scss ./css/style.css --source-map true
のようなコマンドを実行すればOKです。