Sublime TextでCSSのリアルタイムプレビュー

Sublimeではリアルタイムプレビューがないものだと思い込んで諦めていたところ、ふと見つけたので使ってみたら便利さに衝撃を受けたのでメモ。 ざっくりと使い方をまとめておきます。

導入方法

  1. Sublime Textにプラグイン「LiveStyle」をインストール
  2. Chrome拡張機能Emmet LiveStyle拡張」を追加
  3. リアルタイムプレビューしたいページで、Emmet LiveStyleを有効にして、CSSを編集※

chromeのDeveloper Toolsを編集すると、Sublimeで開いているCSSに適用されるし、Sublimeで開いているCSSファイルを編集すると、ブラウザで開いているページがリアルタイムで変更される。

詳しい使い方は以下

livestyle.io

EmmetLiveStyleでSublimeText3でリアルタイムプレビューが出来て超便利! | Taka's Life