このブログでも何度か話題になったEmmetですが、その新機能として、LiveStyleなるものが登場したらしいのでとりあえずメモ。

因みにまだベータ版なので試したい方は自己責任で。

まずは適当にテスト用のファイルを作って試すなりして、いきなり進行中のプロジェクトとかでためしたりはしないように。。

LiveStyleってなに？

この動画を見てもらえばだいたいどんなものかわかると思いますが、Sublime TextとChromeまたはSafariのデベロッパーツールで相互に編集ができるようになるというものらしいです。

なんというか、きもちわるいですねｗ（褒め言葉

デベロッパーツールを使って実際の変化を見ながら値を修正したりして、そのあともう一度エディタにコピペする必要がないというのは素晴らしいと思います。

インストール方法

エディタ側と、ブラウザ側それぞれにプラグインをインストールして使用します。

SublimeTextにパッケージを追加する

まず、SublimeTextのパッケージコントロール（Cmd+Shift+P）から「LiveStyle」で検索してインストールします。

「PyV8」という拡張も一緒にインストールされます。これも動作に必要らしいので消さないように…。

インストールしたらエディタを再起動します。

ブラウザの拡張をインストールする

そしたら今度はブラウザ側の拡張をインストールします。

Chromeの場合はウェブストアにあがってますのでこれをインストールして下さい。

Chrome ウェブストア – Emmet LiveStyle

Safariの場合は、公式サイトのインストール方法を参照して下さい。

拡張をインストールしたらブラウザも再起動しておきます。

使い方

SublimeTextで編集したいページのCSSファイルを開いておきます。

次にブラウザのデベロッパーツールを開いて、「LiveStyle」のパネルを開き、

「Enable LiveStyle for current page」にチェックを入れます。

するとページに読み込まれてるCSSファイルの一覧が出てくるので、プルダウンメニューから対応するファイルを選択します。

あとはエディタで編集したり、デベロッパーツールで値をいじったりすればリアルタイムに反映されていくようです。

感想

なんでここまで表現が曖昧なのかというと、うちの環境ではインストールこそできたものの、何故かうまく動かなかったのですorz

あと、CSSファイルを開きっぱなしにする必要があるんですが、SCSSを使う場合、CSSファイルは開く必要ないし、エクステンションがCSファイルを上書きしてもSCSSをビルドしたら結局巻戻ってしまうのですよね。。

SCSSにも対応してくれると最強の機能になりそうなんですがねぇ。

まだベータ版ですのでこれからの発展に期待したいところです。

詳細とダウンロードは公式サイトからどうぞ。

Emmet LiveStyle — live bi-directional CSS edit of new generation