CSSをそのまま書くのは面倒というのは誰しもが感じる所だろう。そこで最近では構造化されたCSSを作成し、変換プログラムを介して別なフォーマットにするという類のソフトウェアが幾つか登場している。PythonではCleverCSS、RubyではSassやLessが知られている。

ピクチャ 81.png

下がSass、上がCSS

 

だがいずれのフォーマットも変換プログラムを使わなければブラウザに読み取らせることはできない。ファイルを編集するたびに変換プログラムを実行するなんて手間だ、そこで使うのがsaagだ。

今回紹介するオープンソース・ソフトウェアはsaag、Sassファイルを監視して変換するソフトウェアだ。

saagは入力としてSassのあるディレクトリを指定し、出力としてCSSファイルを出力するディレクトリを指定する。後はSassファイルを編集すると自動的に感知してCSSファイルを生成する仕組みだ。Sassファイルさえ編集すれば良いのでごく手軽だ。

ピクチャ 80.png

プロセスが立ち上がってる様子

 

変換プログラムには標準のSassを用いているので変換オプションが利用できる。compressedを使えば、編集時の見た目はSassで分かりやすく、実際に用いるCSSは余計な改行や空白を省いた圧縮版として出力できる。

感覚としてはSassファイルをそのまま編集するとブラウザの表示が変わるというのと何も変わらない。Rubyで作られているが、独立したサービスなのでPHPやPython、Javaの開発でも使える便利なソフトウェアだ。

 

github に saag をリリースしました - まさにっき(コードで世界を変えたい人の記録)

 http://d.hatena.ne.jp/seiunsky/20090623/1245780231

sugamasao’s saag at master - GitHub

 http://github.com/sugamasao/saag/tree/master