CSS、LESS、SCSSリアルタイム編集ツール「Emmet LiveStyle」

styleの変更をリアルタイムでブラウザに反映してくれるツール「Emmet LiveStyle」。

同じようなツールは他にもあるけど、これはSassやLessにも対応したとの事でメモしておくことに。

livestyle
Emmet LiveStyleの公式サイト

使い方は簡単で、Google ChromeとSublime Textにプラグインをインストールするだけ。
Emmet LiveStyleのインストール方法

LiveStyle appからインストールするのが簡単。わたしはこれ使ってChromeにプラグインが追加されなかったのでChromeだけ手動で入れた。
手動でも簡単なので、お好きな方で入れたらおk。

livestyle

あとは、Chromeの拡張機能のアイコンから設定。ここで設定できるのは下記。

  • Emmet LiveStyleの「ON」「OFF」
  • エディタとブラウザの「双方同期」「一方同期」
  • 同期するファイルの選択、追加、削除
  • Remote Viewの「ON」「OFF」

livestyle

Emmet LiveStyleをONにすると、エディタで変更した箇所がリアルタイムにブラウザに反映。逆にChromeのデベロッパーツールで変更した箇所がリアルタイムにエディタに反映される。

livestyle

あとRemote Viewの機能で発行したURLを使用すれば、スマホや他のブラウザでクロスブラウザテストができる。

公式サイトでデモが動画で公開されてるので、気になる方はチェックしてみてください。
Emmet LiveStyleのデモ

プロジェクトの環境によっては使えないのかな。。。FoundationとGulpで作ってるページで試したらエラーでてダメだった。
普段はGulpで環境整えてるからあんまり使わないかもだけど、Gulp導入してないプロジェクトで使ってみようかな。

Written By:
Li

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です