わりと最近までCSSは、chromeの「Sources」タブで、
リアルタイムに変更を見ながら書くのが最高だと思ってました。
が、compass/Sassを覚えるとやっぱりこれも捨てがたい。
というわけで、compassで書きつつもリアルタイム確認ができるツール探したら、ありました。
chrome拡張機能Tincrです。
- Tincr Chrome Extension http://tin.cr/
- Chrome ウェブストア - Tincr https://chrome.google.com/webstore/detail/tincr/lfjbhpnjiajjgnjganiaggebdhhpnbih
こいつをインストールすると、おなじみchromeの開発者ツールに「Tincr」タブが追加されます。
タブごと追加するというあたりイケメンですね。
http://gyazo.com/3566609e9da93c1bf915def9a43a60f7
そして現在書いているサイトのルートディレクトリを指定してあげれば、
ルートディレクトリ以下のCSSとJavascriptを監視して、
ファイルへの変更があったらそのファイルだけリロード・してくれます。
もちろん、CSSが更新されたらなら即座にリレンダリングされますよ。
ファイル変更があった時に、ページ丸ごとのリロードではなく、
変更されたファイルだけリロードされるというのがいいですね。
Javascriptも存分に使っているサイトの場合、そこまでやり直されるとうっとおしい。
そんなわけで、
- scssを変更する
- compass watchが感知してcss更新
- Tincrが感知してレンダリング更新
という、テクノロジーに頼り切った感じで書いております。