還不知道什麼是EMMET？
或者聽過可是沒時間是學習？
在這個快速上手包中，讓你利用短短幾分鐘，快速上手EMMET
透過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 意見:
張貼留言