Edited at
AtraeDay 9

gulp+compass-mixinsで脱compassした話。

More than 1 year has passed since last update.

表題のとおりです。

compass重すぎで仕事にならないのでlib-sassに移行しました。

その際の移行手順です。


Libsassが速いらしい。

ある朝、日頃からCompassの重さにうんざりしていた僕にlibsassという天使が舞い降りた。

http://sass-lang.com/libsass

LibsassはC++で書かれてるらしく、Rubyで書かれてるCompassに比べ桁違いに速いとのこと。

これは入れるしかない。

(1000倍速いとかなんとか…やばい速い http://www.webcyou.com/?p=7122


で、Compassはどうすんの?

Libsassがいくら速いとは言えCompassで使ってた便利ツールは使えない。良くも悪くもただのコンパイルツール。

かと言ってCompassのmixinを全部書き換えるのはめんどい。

ということでこれ。「compass-mixins」

https://github.com/Igosuki/compass-mixins

これでmixinはなんとかなるらしい。

ただspirte系の関数はそのまま対応してないから別途対応が必要。(ちなみに僕はsprite画像やめました。。)

これそのままsassのディレクトリに突っ込めばOK。

@import 'compass'

の書き方がそのファイルから見た相対パスになるのでファイルによっては

@import '../../compass'

とかになるのでエラーが出たら都度対応。(プロジェクトでかいと死ねる。。)


以上をGulpにまとめると


gulpfile.js

var gulp = require('gulp'),

sass = require("gulp-sass");

gulp.task("sass",function(){
gulp.src('assets/sass/**/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(gulp.dest('assets/stylesheets/'));
});

gulp.task('default', function(){
gulp.watch(['assets/sass/**/**/*.scss'], ['sass']);
});


あ、はい。gulp-sassはデフォルトlibsassなので特別何かする必要はないです。

gulpについては別にググって頂ければと。