18
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-09-02
  • 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も使えるしね。

18
18
0

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
  3. You can use dark theme
What you can do with signing up
18
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?