Sass
gulp

gulp-sassで.sassファイルを使うときの注意点(更新あり)

More than 3 years have passed since last update.


  • Ruby SassはBootstrapとかコンパイルすると遅すぎて辛い

  • Lessは速いけどインデントで書きたい(curly braceを書きたくない)

  • StylusはBootstrapが公式にサポートしてない(個人的に使ったことない)

.sassで書きたい。


環境


  • gulp 3.8.10

  • gulp-sass 1.3.2

2015/1/30更新。

node-sassのアップデートに伴ってgulp-sassのバージョンも上がり、以前と対策方法が変わっています。以前の内容は更新履歴を見てください。


普通に.sassを渡すとコケる


gulpfile.coffee

g = require 'gulp'

sass = require 'gulp-sass'
g.task 'default', ->
g.src './style.sass'
.pipe sass()
.pipe g.dest './'

このままだとコンパイルできない。.sassという拡張子でも.scssとして解釈される。インデントスタイルのシンタックスでコンパイルするには、


If you want to use the indented syntax (.sass) as the top level file, use sass({indentedSyntax: true}).


https://github.com/dlmanning/gulp-sass/blob/master/README.md

とのことです。つまり


gulpfile.coffee

g = require 'gulp'

sass = require 'gulp-sass'
g.task 'default', ->
g.src './style.sass',
.pipe sass
indentedSyntax: true
.pipe g.dest './'

.sassファイルをコンパイルできます。

ただ、https://github.com/dlmanning/gulp-sass/pull/181がマージされれば拡張子をチェックして自動でindentedSyntaxオプションを振ってくれるようになるので特別にオプションを設定することなく.sassファイルもコンパイルできるようになると思います。

そうなればこの記事も不要になるので、確認次第こちらも更新いたします。


Libsassはコンパイルが早くて素晴らしいけど……

LibsassはRubySassに対してコンパイルが速い点以外の優位性はないので、Rubyが死ぬほど嫌いでRubyをインストールしたくない人以外で、速度が気にならない人はgulp-ruby-sassを使うといいでしょう。あっちはcompassも使えるしね。