search
LoginSignup
18

More than 5 years have passed since last update.

posted at

updated at

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

  • 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}).

とのことです。つまり

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も使えるしね。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
18