2016年7月4日

[技術分享] Emmet簡易教學 - 快速上手包


還不知道什麼是EMMET?
或者聽過可是沒時間是學習?
在這個快速上手包中,讓你利用短短幾分鐘,快速上手EMMET




EMMET是一個支援眾多程式編輯器的外掛,支援的編輯器不只這裡列的這些,有興趣的話可以進一步到這個EMMET網站查詢:http://emmet.io/download/




透過EMMET,最重要的是它可以讓你不需要再死記HTML或CSS關鍵字,減少不必要的coding錯誤,加速整個網頁開發的工作流程,另外還可以讓你的小拇指獲得適當的休息(打角括號<>時要常常按Shift),而且EMMET的寫法和CSS選擇器相似,學習上非常容易!

------
Icon credit By Kirill Zorenkov, RU




EMMET支援很多不同的編輯器,在這裡我們以ATOM為例,如果你用的不是ATOM可以參考以下網址教學:
Bracket:https://www.youtube.com/watch?v=eCxfHvijCQk
Sublime Text:https://www.udemy.com/sublime-text-3/
Notepad++:https://teddysun.com/254.html
或到EMMET官網查看:http://emmet.io/download/

----
Icon credit:By Alex Fuller, US




因為Atom有package的control center,所以插件的安裝上相當簡單。




如果你還在考慮要不要安裝,想先試試看是不是真的有這麼好用,可以先用JSBIN這套線上編輯器跟著後面的說明試著操作看看。
JSBIN線上編輯器網站:http://jsbin.com/




EMMET和其他插件最不一樣的地方在於它的語法是有”邏輯的”,而且它的寫法和CSS的選擇器非常類似。

----
Code Search Icon Credit By Stefan Parnarov, BG




EMMET的使用非常簡單,只要輸入EMMET的關鍵字後,按下TAB鍵,即可產生相對應的語法。
但要注意的是,關鍵字之間不能為了整潔或其他目的而使用空格。













如果你想得到這樣的結構,可以輸入 div+div>p>span+em 。










如果你想得到這樣的結構,可以輸入 nav>ul>li*4^^article 。







接下來我們說明如何利用EMMET
在HTML結構中添加屬性

----
Properties Icon  Credit By Alex Auda Samora, UA










如果你想得到這樣的結構,可以輸入 form[name="test" method="post"]>(input[type='text'].text)*2。













如果你想得到這樣的結構,可以輸入 article#article>p>a[href="test.html"]{A link}。




恭喜你!
你已經掌握了EMMET的核心
最後來看看它如何透過強大
的縮寫功能在CSS上發揮

----
Minimize Icon Credit By Creative Stall, PK




在CSS的檔案或中,一樣可以直接套用這些關鍵字。




想帶出HTML結構可以使用 ! 或 html:5 均可




其實EMMET的核心還是在於最前面所提的邏輯概念和快速建立HTML架構,這些縮寫主要是幫自己減少打字的時間和避免手誤,如果真的記不起來,也不用硬背,常用的屬性你可以到Cheat Sheet查找用法,不常用的就直接手打就好(反正也不常用)!
EMMET Cheat Sheet:http://docs.emmet.io/cheat-sheet/




如果你對於EMMET還想要有更深入的了解,一定不能錯過
---
EMMET官方網站:http://docs.emmet.io/css-abbreviations/
既然是官方網站,對於EMMET的運作有最詳細的說明和解釋,另外也有說明如何客製化你的EMMET。

EMMET Cheat Sheat:
http://docs.emmet.io/cheat-sheet/
---
一小時上手Sublime Text:https://www.udemy.com/sublime-text-3/
這個Udemy課程是免費的,雖然主要是說明Sublime Text的用法,但是裡面有一堂課是在說明EMMET的使用





如果你喜歡我們的內容,歡迎到我們的粉絲團PJCHENder網頁前端資源站按讚!

1. 如果喜歡的話,也可以設定為搶先看。
2. 透過留言鼓勵我們或與我們一同討論。
3. 於文章下方標註有興趣的朋友。
4. 透過分享,讓更多人看到我們的內容。

此篇文章同步發佈於PJCHENder網頁前端資源站

0 意見:

張貼留言