すがブロ

sugamasaoのhatenablogだよ

github に saag をリリースしました

ruby github saag

saag とは

HTML/XHTMLを生成するためのマークアップ言語である、 Haml（参考：日本Hamlの会） をインストールするとついてくる CSS 用マークアップツール、 Sass の編集を補助するツールです。
Sass の説明はSassでCSSの弱点を克服しよう − ＠IT が詳しいです。
Sass は sass コマンドを用いる事で *.sass ファイルを読み込み、 css ファイルを出力する事ができます。
sinatra 等のフレームワークを用いる事で上記 sass ファイルを動的に読み込んだりもできるのですが、 そうではない場合は、まず Sass で開発し、静的ファイルとして CSS を出力するような運用の方ありそうな気がするんですね。
そんなわけなので、 sass ファイルを監視し、変更があった場合にすぐに css ファイルを生成するツールがあると便利なのでは、と思って本ツールを作成しました。

具体的には

引数で指定した *.sassファイル/ディレクトリを監視し、変更があれば *.css に変換します。ASの開発で使う rascut みたいな感じと言えば良いでしょうか*1。
例えば、以下のようなディレクトリ構成の場合に、 /htdocs/css/ ディレクトリに即座に css が反映されると楽じゃね？　っていうイメージで。

├─htdocs
│  │  index.html
│  │
│  └─css
│         style.css #<--------- ここに変更が反映される！
└─src
    └─sass
            style.sass #<------- ここが変更されると

インストール方法

gem を使ってインストールします。
gem の sources に github が無ければ追加してから gem install してくださいね。

gem sources -a http://gems.github.com
sudo gem install sugamasao-saag

使い方

オプションは -i と -o と -r があります。

  • -i は監視対象のファイル/ディレクトリを指定します。省略時は実行時のカレントディレクトリを基点とします。
  • -o はCSSに変換したファイルを格納するディレクトリを指定します。省略時は -i オプションと同じ場所を基点とします。
  • -r は sass でのコンパイルオプションになります。「compressed」にすると空白やインデント等が切り詰められます。省略時は nested です。

上記のディレクトリ構成の場合は、以下のようになります。

saag -i /www/src/sass -o /www/htdocs/css

また、動作環境は Mac OSX と WinXP で確認しています。

github のページは

こちらです sugamasao/saag · GitHub はじめての git & github でわけわかんないんですけど、これからちょいちょい体裁は整えて行こうと思います。

あと

アプリケーション起動時に出力されるバージョンが 0.1.0 ですけど、実際の最新バージョンは 0.2.1 です。
何か問題があればコメント等頂けるととても嬉しいです！＞＜

追記（2009/06/28）

MOONGIFTさんで紹介して頂きました！（多謝！！）

*1:実際のところ、激しくインスパイアしてますw