BattleProgrammerShibata

ある日は誰かと戦い、ある日は何かと戦い、そしてある日は自分と戦うのだろう、そういう生き物。

SublimeTextで編集中のCSSをリアルタイムにブラウザでプレビューする

SublimeTextで編集したCSSを、リアルタイムにブラウザでプレビューしたくなったのでプレビューできるようにした。ただしブラウザはGoogleChromeFirefoxなど他ブラウザ派の方ごめんなさい。

※注意:HTMLの変更はリアルタイム反映されません。

Sublime側の準備

パッケージコントローラから「LiveStyle」をインストールする。

f:id:bps_tomoya:20131206142857j:plain

Chrome側の準備

拡張のEmmet LiveStyleをインストールする。以下のURLからどうぞ。

Chrome ウェブストア - Emmet LiveStyle

これで準備はOK。

やってみよう

Sublime側で、リアルタイムプレビューしたいCSSファイルを開いておく。開いておかないと、Chrome側との同期を取ることが出来ない。もちろん複数ファイル可。

Chromeでプレビューしたいページを開いたら、F12キーを叩いて開発ツールを開く。するとLiveStyleというタブが出来ているはず。

f:id:bps_tomoya:20131206144736j:plain

上部の「Enable LiveStlye for current page」にチェックマークを入れる。

すると、File mappingの一覧にそのページが使用しているCSSファイルが列挙されるので、任意のファイルの右側のドロップダウンボックスから、Sublimeで開いている任意のCSSファイルを選択する。

これでSublime側で掛けた変更が、Chrome側でリロードせずに反映されるようになる。さらに開発者ツールで掛けた変更はSublime側にも返ってくるようになる。

おしまい。

開発者ツールを閉じてしまうと、リアルタイムプレビューも終了してしまう点に注意。