Rubyのご機嫌を伺いたくないから、NodeだけでCompassっぽいことをやってみたい。

変なこだわり

• フロントエンド開発で、gulp周りにRuby入れたくない。
• なぜなら、gemとかrbenvとかrubyのパスとかハマることが多かったため。
• ローカルの環境依存な点もありがち。
• そもそも、Yosemiteにデフォで入ってるRubyとrbenvで入れるrubyとでパスがごっちゃになるのっらぃ。（そこらへん整理しろって話かもしれない）

ということで。

sass は node-sass でコンパイル

libsassであなたもRubyから開放されよう！
sass.jsってのもあった。

node-sassがlibsassをラップしてくれてるので、rubyのことは気にせずにいけるのです。

gulpfile.coffee

sass = require 'gulp-sass'
gulp.task 'sass', ->
  gulp.src './src/styles/sass/**/*.sass'
    .pipe sass()
    .pipe gulp.dest './build/assets/css'

Mixinは必要なやつだけ

・探せばあるもんですね
・必要なやつだけコピペすればいいんじゃないっすかね。
・あ、LICENCEがAll right Reservedだったので気をつけましょう。

問題のSprite

@import "hoge-*.png"

.hoge-* { /* 色々*/ }

こんなお手軽なスプライトマシーンnodeにもありますか？やっぱないですよね？
いや！どっこいあるんですよ！

みんな大好きSpritesmithで脱CompassSprite

普通にCompassでスプライトつくるより、高機能で強力です

gulpfile.coffee

spritesmith = require 'gulp.spritesmith'
imagemin = require 'gulp-imagemin'

gulp.task 'sprite', ->
    spriteData = gulp.src "src/styles/sass/sprite/*.png"
      .pipe spritesmith
        imgName: "sprite.png"
        cssName: "sprite.css"
        imgPath: "../img/sprite/sprite.png"
        cssFormat: 'css' #保存するスタイルのフォーマット
        padding: 4 #スプライト間の隙間
        cssOpts: #接頭語を変更する
          cssSelector: (sprite)->
            return ".sprite-"+sprite.name
    spriteData.img
      .pipe imagemin()
      .pipe gulp.dest 'build/assets/img/sprite'
    spriteData.css
      .pipe gulp.dest 'build/assets/css'

これで何とかなります。

ツッコミ

まとめるとCompassってすごいってことで

この３つの機能をまとめてくれるCompassはやっぱり出来る子。
だけど、使っていくうちに機能はINDEPENDENTの方が取り回しが良いと気づき始める
個人的には分けられてスッキリ。