SASS から Stylus に切り替えるべき 3つの理由

1. 構文が柔軟

公式サイトを見ればわかりますが、
書き方がとても柔軟です。

h1 {
  color: red;
}

h1 {
  color: red
}

h1
  color: red;

h1
  color: red

//全部通る!

SASS のつもりが、後ろにセミコロンつけて怒られたり、
CSS をコピペするために変換する苦労とは無縁になります。

3. JS で 関数が書ける

これは、 JS が好きな人向けのメリットですが、
コンパイルするときに、 JS で書かれた関数が定義できます。

次のコードは、Compass の image-url と同じ関数を定義してます。

# stylusdef.coffee

path = require "path"

stylus = require "stylus"
nodes = stylus.nodes

HTTP_IMG_ROOT = "../img"

imageUrl = (urlObj) ->
  new nodes.Function "url", path.join HTTP_IMG_ROOT, urlObj.string

module.exports =
  "image-url": imageUrl

JS の関数を、コンパイルのときに渡せば、
stylus の中で普通に関数として使える!

# glupfile.coffee

gulp = require "gulp"
stylus = require "gulp-stylus"

stylusdef = require "./stylusdef"

gulp.task "stylus", ->
  gulp
    .src "stylus/*.styl",
    .pipe stylus
      define: stylusdef
    .pipe gulp.dest "css/"