SublimeTextで編集したCSSを、リアルタイムにブラウザでプレビューしたくなったのでプレビューできるようにした。ただしブラウザはGoogleChrome。Firefoxなど他ブラウザ派の方ごめんなさい。
※注意:HTMLの変更はリアルタイム反映されません。
Sublime側の準備
パッケージコントローラから「LiveStyle」をインストールする。
Chrome側の準備
拡張のEmmet LiveStyleをインストールする。以下のURLからどうぞ。
これで準備はOK。
やってみよう
Sublime側で、リアルタイムプレビューしたいCSSファイルを開いておく。開いておかないと、Chrome側との同期を取ることが出来ない。もちろん複数ファイル可。
Chromeでプレビューしたいページを開いたら、F12キーを叩いて開発ツールを開く。するとLiveStyleというタブが出来ているはず。
上部の「Enable LiveStlye for current page」にチェックマークを入れる。
すると、File mappingの一覧にそのページが使用しているCSSファイルが列挙されるので、任意のファイルの右側のドロップダウンボックスから、Sublimeで開いている任意のCSSファイルを選択する。
これでSublime側で掛けた変更が、Chrome側でリロードせずに反映されるようになる。さらに開発者ツールで掛けた変更はSublime側にも返ってくるようになる。
おしまい。
開発者ツールを閉じてしまうと、リアルタイムプレビューも終了してしまう点に注意。