コンパイルしてスタイルシートを生成する高機能代替言語「Roole」
Rooleはコンパイルしてスタイルシートに変換する独自のマークアップ言語です。
スタイルシートについてScssやSass、Lessなど様々な代替マークアップが開発されています。今回もその一つ、Rooleを紹介します。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-12 13.26.10.1360727342.png)
例。波括弧は不要です。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-12 13.26.16.1360727344.png)
変数が使えます。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-12 13.26.25.1360727346.png)
条件分岐できます。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-12 13.26.32.1360727348.png)
繰り返しできます。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-12 13.26.41.1360727350.png)
mixi-inです。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-12 13.27.19.1360727352.png)
メディアごとの出し分けも可能。
Rooleは変数はもちろん、ifやfor、計算式を使うことができます。mix-inやextendにも対応しています。波括弧がなく、何となくPythonやCoffeeScriptを彷彿とさせます。node.jsのコマンドで変換することも、クライアントサイドでの変換も可能です。使いこなせばスタイルシートの記述がかなりシンプルになるのではないでしょうか。
RooleはJavaScript/node.js製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
JavaScript代替言語が多数出ているのと同様にスタイルシートもまた大型化していくWebアプリケーション開発においては嫌がられる傾向にあります。様々なライブラリを組み合わせたりすることで設定が上書きされてスタイルが崩れてしまうことも度々あり、非常に扱いが悪いです。
そろそろ決まったやり方が出てきてもおかしくありません。有力なのはBootstrapが対応しているLessですが、まだまだ他の手法にもチャンスはあります。大事なのはどれだけのライブラリに対応できるか、かも知れません。