プラグイン:Emmet LiveStyle

このページは執筆中です

Emmet LiveStyle プラグイン (beta)

Emmet LiveStyle はスタイルシートを高速に双方向・リアルタイム編集するためのツールです。

スタイルシートの高速な双方向・リアルタイム編集

リアルタイム編集

入力と同時に LiveStyle がブラウザのスタイルシートを更新します。ファイルの保存やページの再読み込みをしなくても Web ページに反映された状態を確認することができます。

ブラウザからエディタへ

ブラウザのデベロッパーツールでレイアウトを微調整し、これらの変更をソースコードに反映させたいですか？LiveStyle はこれができる唯一のツールです。LESS と SCSS にも対応しています。

使用方法

1. はじめに LiveStyle のアプリケーションを下記からインストールしてください。

http://livestyle.io/

2. LiveStyle のアプリケーションを起動したら「Install Chrome Extension」から Chrome の拡張機能をインストールします。

3. Mery の「ツール > プラグイン > Emmet LiveStyle」でプラグインを有効にします。

4. Chrome のメニューバーのアイコンから LiveStyle を起動します。

5. "Enable LiveStyle" のスイッチを ON にします。

6. Mery でスタイルシートのファイル (css, less, scss) を読み込むか、新規作成して編集モードを「css」に設定します。

7. Chrome 側の LiveStyle でスタイルシートを選択します。

8. おめでとうございます！Mery と Chrome で驚きの双方向編集をお楽しみください！

既知の問題

ブラウザのデベロッパーツールで特定の属性値をドロップダウンで選択した場合にエディタ側にセミコロンが残ることがある。例えば overflow-x の値を auto から hidden にドロップダウンで選択して変更した場合など。LiveStyle 専用のエディタ群でも同様の問題を確認。恐らく Chrome 拡張機能側の問題だと思われるのであちら側の修正待ち。