atomとchromeでもLiveStyle

livestyle-atomのインストール

apmが動くなら、
apm install livestyle-atom

串設定ができていない場合などは
AtomメニューからPreference, Installをクリック
Search Packagesで
Livestyle-atom
を検索、Install
Atomを再起動

ChromeにLiveStyleをインストール

ChromeウェブストアでEmmet LiveStyleをインストール
Chromeを再起動

設定する

Chromeに追加されたLiveStyleボタンをクリックして、右上のOFFをONにする
スクリーンショット 2016-06-09 19.35.03
今回はstyle.cssというcssを変更する場合。

いじる

ChromeのDeveloper toolsでstyleを変更すると、atomで開いているエディタ内のcssが自動で変更された。
スクリーンショット 2016-06-09 19.36.21
スクリーンショット 2016-06-09 19.36.42
▲変更前
スクリーンショット 2016-06-09 19.37.00
スクリーンショット 2016-06-09 19.37.08
▲変更後

反対に、atomでstyleを変更すると、chromeの画面がリアルに書き換わります。


コメントを残す

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