inari111 blog

Webエンジニアの備忘録

【Sublime Text3】CSSをリアルタイムで更新しながら作業する

CSS書くときだけはSublime Text使ってるんだけど、CSSがリアルタイムに反映されると便利なので書いていく。

必要なもの

まずはPackage Controlのインストール

ここでコードをコピーしてくる https://sublime.wbond.net/installation#Manual_Instructions

Sublime Textで View -> Show Console( Ctrl + ‘(バッククォート)) でコンソールを開く

さっきのコードをペーストしてEnterを押す

Emmet LiveStyleインストール

Package Controlが使える状態になったので * Ctrl + Shift + P でPackage Controlを開き * Install Packageを選択

f:id:tky-24:20140518004426p:plain

  • LiveStyleを検索

f:id:tky-24:20140518005328p:plain

Google Chromeプラグインをインストール

最後にChromeWebstoreからインストールをする Chrome Web Store - Emmet LiveStyle

Developer Toolsに「LiveStyle」というタブが新たに追加されたことを確認

f:id:tky-24:20140518004932p:plain

Enable Live Style for current pageをチェックして、Sublime Textの方で編集すればリアルタイムでCSSが反映される

他のエディタでもリアルタイムでCSSが反映されるのがあるんだろうか Vimであると嬉しいなー