[外掛] 前端開發神器 Emmet LiveStyle 即時修改網頁樣式，即時預覽畫面

　　對於許多有經驗的網頁設計師而言，當要調整網頁樣式時，最常用的方法就是，透過Chrome瀏覽器的開發人員工具，將要調整的樣式，加到開發人員工具的右下角的Styles面板中，就可即見即所得的預覽結果畫面，這是一個相當快速且簡易的方法，但這個方法有個小缺點就是，一旦重新整理網頁就不見，或一次修改太多樣式，就不易尋找與拷貝。

  因此最近梅干發現一個超棒的Chrome外掛，且搭配Sublime後，就可實現即見即所得的效果，甚至重新整理頁面也不會不見，同時還可以修改在線網頁，是一個相當好用的外掛，因此身為網設的你Emmet LiveStyle這套件，絕對不容錯過，至於要怎麼用，現在就一塊來看看吧！

---

Emmet LiveStyle

---

Step1
首先，進到Emmet LiveStyle的外掛頁面後，點一下「加到Chrome」鈕，再點「新增擴充功能」鈕。

---

Step2
當安裝完畢後，在網址列後方，會出現Emmet的小圖示。

---

Step3
接著再到輔助工具的LiveStyle頁面，點下方的「Download App」鈕。

---

Step4
下載完畢解壓縮後，接著再點一下「Install Sublime Text 3 plugin」，而這隻外掛需搭配Sublime Text的編輯器。

---

Step5
當都安裝完畢後，分別會看到綠色勾勾。

---

Step6
接開啟製作的專案頁面，再點Emmet的小圖示，再按ON將它開啟。

---

Step7
這時將專案的CSS檔，開啟到Sublime Text的編輯器中，這時再瀏覽器的Emmet的面板中，將style.min.css的下拉選單中，選擇style.min.css也就是Sublime Text中的CSS檔。

---

Step8
當選定好後，就可開始調整CSS的樣式。

---

Step9
這時只要即時修改CSS的樣式，在不用儲存的情況下，瀏覽器就會立即的顯示修改的結果。

---

Step10
最酷的在這邊，當今天瀏覽已上線的網頁，接著開啟Sublime Text並新增一個檔案，再將文件類型設為CSS。

---

Step11
接著一樣將瀏覽器中的Emmet圖示設為on，這時在樣式的下拉選單中，就會看到一個未命名的文件名稱。

---

Step12
選擇後，這時瀏覽器中的樣式，就會與Sublime Text中的檔案聯動。

---

Step13
這時當在Sublime Text新增或修改任何的樣式，瀏覽器也會即時顯示，更棒的是即便是重新整理頁面，那些設定檔也不會不見，真是相當好用，因此身為一位專業的網頁設計師，這隻Emmet LiveStyle的外掛套件，可千萬別錯過了。