Emmet LiveStyle對于很多開發(fā)CSS朋友一定是非常熟悉了。是一個非常高效的CSS前端瀏覽器插件。功能非常全面,能夠大大的提高前端CSS開發(fā)的效率。其實最早是sublime的插件,功能功能的強大。對于本地開發(fā)的朋友可以試試,運行效果更加的強大。而目前的這個Emmet LiveStyle則是專門為瀏覽器設計的。
軟件功能
1、即時更新(不會重新加載頁面,樣式修改以后無需保存也能預覽);;
2、多個頁面同時預覽(例:同時打開多個頁面,并且關(guān)聯(lián)到相同的CSS,此時修改該CSS,這些頁面都能即時顯示修改內(nèi)容);
3、雙向修改(在Chrome開發(fā)者工具和Sublime Text中,只要有一處修改,兩個工具的樣式都會更改。)
4、便捷的安裝和使用。
使用方法
安裝瀏覽器擴展程序:
安裝好后,會出現(xiàn)下面這個圖標,點擊后會出現(xiàn)如下圖所示。這個時候還是不能用的,因為我們還沒在sublime里安裝emmet livestyle。二者還沒關(guān)聯(lián)起來。接下來,開始闡述如何安裝emmet livestyle。
首先安裝Subliem Text插件,確保有sublime->preferences->package control選項。如果有的話下一步,沒有的話請自行百度下,網(wǎng)上很多相關(guān)資料。接著點擊package control,輸入install Package ,然后過會兒會彈出框,輸入livestyle。
(1)LiveStyle和Emmet(用來補全代碼)一樣,需要PyV8插件的支持。建議先安裝Emmet,因為安裝Emmet的同時會自動安裝PyV8。
(2)如果sublime的LiveStyle安裝好后,但仍然打開google的livestyle顯示不了,如果你的sublime是破解碼的,建議卸載掉,然后去官網(wǎng)下載sublime3.重新安裝Emmet和livestyle。
(3)安裝Emmet的過程中,如果出現(xiàn)PyV8安裝不成功,sublime出現(xiàn)下圖,那么可以通過復制該鏈接下載Pyv8。
(4)把下載的文件解壓后放到以下目錄。
C:UsersAdministratorAppDataRoamingSublime Text 3Installed PackagesPyV8。
如果沒有PyV8這個目錄的話就新建一個。
最終就是這樣一個目錄
C:UsersAdministratorAppDataRoamingSublime Text 3Installed PackagesPyV8pyv8-win64-p3。
上面步驟都弄好后,就可以打開google里的livestyle啦。如下圖,檢測到包含了global.css和login.css。如果想要在線更改global.css,選擇三角形箭頭選擇對應的css文件即可。在google的開發(fā)者工具調(diào)試代碼后,打開sublime即可發(fā)現(xiàn)光標已經(jīng)定位到修改的內(nèi)容,若此時保存sublime里的文件,則可以永久保存。
注:此時Chrome的Matched CSS Rules和Sublime Text的修改都會雙向同步。