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/"