Kyosuke hamalog

Less & Sass Advent calendar 2011 の10日目です。

CSSメタ言語ではSass（SCSS）やLESSが流行っているしLess & Sass Advent calendarですが、あえて別の選択肢として「Stylus」というものを紹介しようと思います。

StylusもSassやLESSと同じようにCSSに変換するCSSメタ言語の一つです。 開発者はnode.jsでの超有名ライブラリ「express」を作ったTJ Holowaychuk。 彼はもともとSass（SCSS対応前のバージョン）をnode.jsに移植したSass.jsをつくっていましたが、現在はそちらのプロジェクトをやめて独自のStylusに専念しているようです。Sass.jsのページには「Stylusをチェックすることを強くすすめる」とコメントが残してあります。

Stylusの設計がどのように考えられているか、その特徴はどうなのかというのは 公式のドキュメントのトップページが分かりやすいので簡単に翻訳してみます。 （原文でなにを指してるか分かりにくかった部分は勝手に補完してる部分があります）

---

原文： Stylus

Stylus

Expressive, dynamic, robust CSS：表現豊かでダイナミックかつ強固なCSS

body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

もし波括弧{}を省略できるとしたら？

body
  font: 12px Helvetica, Arial, sans-serif;

a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

セミコロンはどうでしょう？

body
  font: 12px Helvetica, Arial, sans-serif

a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

コロンもはずしましょう

body
  font 12px Helvetica, Arial, sans-serif

a.button
  -webkit-border-radius 5px
  -moz-border-radius 5px
  border-radius 5px

同じことを繰り返し書かないようにしよう

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

body
  font 12px Helvetica, Arial, sans-serif

a.button
  border-radius(5px)

透過的なmixinはどう？

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

body
  font 12px Helvetica, Arial, sans-serif

a.button
  border-radius 5px

作ったらシェアしょう

@import 'vendor'

body
  font 12px Helvetica, Arial, sans-serif

a.button
  border-radius 5px

独自で定義するfunctionも同じ

sum(nums...)
  sum = 0
  sum += n for n in nums

sum(1 2 3 4)
// => 10

もしそれがすべてオプションだったらどうですか？

fonts = helvetica, arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}

Stylusを始めよう

$ npm install stylus

もし下記のリストにあげてるような機能と特徴をもったnodejs用の表現力豊かな CSS言語が必要であれば、Githubに多くの情報があります。

Features

• コロン:は省略可
• セミコロン;は省略可
• カンマ,は省略可
• 波括弧{}は省略可（省略した場合はインデントで判定する）
• 変数
• 構文挿入
• Mixins
• 計算
• 型強制（自動型変換）
• 動的インポート
• 条件分岐
• 繰り返し
• セレクタのネスト
• 親参照（&:hoverなど）
• 変数として扱えるfunction（Variable function calls）
• 構文スコープ（Lexical scoping）
• 定義済みfunctions (25以上)
• 独自function定義（In-language functions）
• 圧縮設定オプション
• イメージ埋め込み（DataURI）オプション（Optional image inlining）
• Stylus executable
• 強固なエラー検出機能
• １行コメントと複数行コメント
• CSSハック利用ためのCSSそのまま出力機能（CSS literal for those tricky times）
• \による文字エスケープ機能（Character escaping）
• TextMate（テキストエディタ）用拡張機能（TextMate bundle）
• そのほかいろいろ

---

Stylusは波括弧やセミコロン、コロンの省略などにより昔のSassに近いCSSとはかけ離れた文法で書けるようになっていますが、これらはオプションであり、最近のCSSメタ言語の傾向であるCSS文法をそのまま生かした書き方もできるようになっています。

新しいCSSメタ言語であるため情報が多いとはいえませんが、nodejsを使うのであれば選択肢の一つとして候補にいれてもよいのではないでしょうか。

ちなみにsaucer.jpさんが7日目で紹介されたFireSassと同じような拡張でFireStylus for Firebugというものもあります。僕はFirefox全然使わなくなってしまったので試していませんが、Firefoxを使っている方は導入してみても良いかもしれません。