Emmets LiveStyle

Emmet LiveStyleが正式リリース。SCSS, LESSのリアルタイムコンパイルも可能に。

なにやらChromeに見慣れないアイコンがあると思ったら、Emmet LiveStyle がアップデートされていました。2年以上Beta版のまま更新もなかったのが、突然の1.0リリース…!
アップデートにより SCSS, LESS にも対応や、リモートビュー機能の追加などをしています。
使い方が少し変わったので、ざっくりまとめました。

LiveStyle. The first bi-directional real-time edit tool for CSS, LESS and SCSS.

http://livestyle.io/

Emmet LiveStyleは、HTML,CSSの記述を省略できるEmmetとは関係なく、Sublime TextとChromeで双方向の同期編集ができるプラグインです。
以下、動画で動作を確認できます。

使用方法

まずはLiveStyleアプリケーションのインストール

いままではSublime Textのパッケージと、Chromeのエクステンションだけで動いていましたが、さらにLiveStyleアプリケーションが必要になりました。

Live Styleサイトからアプリをダウンロードします。Win、Mac対応です。

LiveStyleアプリ起動
起動するとメニューバーに常駐アプリが表示されます。
俺のメニューバーに、新たな1ページ。

インストールをしていない場合は、インストールボタンが出るのでインストールできます。
もしくはChrome Webストア及びパッケージコントロールからインストール。

前バージョンをインストール済の場合は、基本的には自動でアップデートされるはず。

ここで気をつけたいのが、Sublime Text 2と3をどちらもインストールしている場合、2が優先されてしまいます。そのまま2を使うか、いっそ2をアンインストールしてください。

LiveStyleアプリ installesd
どちらにもインストール済。これでスタンバイOK。
LiveStyleアプリは起動しておくだけで、設定などは無いようです。

常に起動しておきたい場合は、ログイン項目に入れておきましょう。

オン・オフはChromeから

Chromeメニューバーのアイコンから、Enable LiveStyle をONにすることで双方向編集が開始されます。
前バージョンはデベロッパーツールから設定でしたが、メニューバーのアイコンから設定に変更になってます。

Google ChromeScreenShot-006
同期させるファイルを選択。

今回はお試しなので開いている未保存ファイル「untitled:27」を選択。本来は同じプロジェクト構成のファイルを指定します。

SCSSからもリアルタイムに反映されました。

LiveStyle デモ1
「&」繋ぎのセレクタでも反映されていることがわかる。

Chromeデベロッパーツールからの変更もSublime Textに反映されます。

LiveStyle デモ2

Remote View

追加された新機能、リモートビューでローカルサイトを一時的に公開することができます。

Google ChromeScreenShot-001
Chromeエクステンション下部のRemote Viewをオンにすると、 http://※※※.livestyle.io のようなドメインを発行し、トンネルでローカルWebサイトが公開されます。

151230-0004.jpeg
公開するにはLiveStyleアプリがバックグラウンドで実行されている必要があります。

リモートビューはベータテスト中で、有料サービスになる予定みたいです。

まとめ

SCSS, LESSにも対応したことで、使用の幅は広がりましたね。(SASS記法も対応してほしい…)
BootstrapなどSCSSを使ったフレームワークでリアルタイムでレイアウトできるのは便利そうです。

WebStormなど JetBrainsエディタでもプリプロセッサーのプレビューはできたのですが、書き途中にエラー表示になったり動作は微妙でした。
LiveStyleは途中ではエラー表示もでず、動作も安定しているように感じました。

まだ業務などのパーシャルファイルをガンガン読み込んだ状態で試していないので、どこまで動くかわかりませんが、用法容量を守って正しく試用してみたいと思います。

スポンサーリンク
投稿日: カテゴリー Editor, Sassタグ , , ,