前端開發神器 Emmet 快速上手教學整理,減少 HTML / CSS 輸入的麻煩﹍Sublime Text

前端開發神器 Emmet 快速上手教學整理,減少 HTML / CSS 輸入的麻煩﹍Sublime Text

A+
網頁製作久了就會發現,手刻 HTML/CSS 挺累贅的。就像 jQuery 可以讓 Javascript 寫起來更快、不必糾結瀏覽器相容性問題,「Bootstrap」可以縮短網頁版面設計的時間,那麼 HTML/CSS 的輸入,有沒有快速便利的工具呢?

Emmet」(前身為 Zen Coding)就是為此而開發的工具,只要有一點點 CSS 選擇器的概念、基礎,就可以很快上手。它除了可以幫助我們輸入的作業,很重要的一點是,這樣的工具也可以降低手誤、打錯字的機率

本篇會以強大的編輯軟體 Sublime Text 作為使用環境,引導讀者如何快速學會 Emmet 語法,縮短輸入 HTML/CSS 的時間。



一、Sublime Text 安裝 Emmet




如果熟悉 Sublime Text 的話,以上內容可不看,按以下步驟即可:

  • 按 Ctrl + Shift + P
  • 輸入 install
  • 輸入 emmet 安裝即可



二、Emmet 上手技巧


Emmet 所有的語法都在這裡:



但初學者直接看這張全英文的速查表(cheat sheet),可能只會對這個工具更懼怕,因此建議將來再使用。

一開始可先看這篇,瞭解基本的概念:



簡單來說,Emmet 的使用方式可以看成這樣:

  • 輸入 HTML 元素名稱,配合 CSS 選擇器規則
  • 全部輸入完之後,按 Tab 鍵,就會自動產生 HTML 碼


例如輸入以下簡碼:

div#container>p.title+div.body>span.snippet+img[src="wfublog.jpg"]

按下 Tab 後,會自動產生以下 HTML 碼:

<div id="container">
<p class="title"></p>
<div class="body">
<span class="snippet"></span>
<img src="wfublog.jpg" alt="">
</div>
</div>

因此只要熟悉 CSS,就能無痛學會 Emmet 初階技巧。



三、Emmet 進階技巧


請參考這篇「Emmet 语法速查表」,初階的內容就略過,摘要一些重要的縮寫技巧,詳細內容請參閱該篇文章:


1. 省略 HTML 標籤名稱
  • div 可以省略
  • 特定標籤的子元素可省略,例如 table、ul、select

例如:

#WFU>table>.row>.body
可自動產生 div, tr, td 等標籤:

<div id="WFU">
<table>
<tr class="row">
<td class="body"></td>
</tr>
</table>
</div>


2. 括號 () 搭配乘號 *

例如:
#WFU>ul>(li>a)*3
可以自動產生 3 組 li 標籤(含 a):

<div id="WFU">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>


3. 續編功能 $

例如:

ul>.wfu$*3
可以產生以下:

<ul>
<li class="wfu1"></li>
<li class="wfu2"></li>
<li class="wfu3"></li>
</ul>


想要補零位數的話,要補幾個位數,就重複 $ 幾次,例如:

ul>.wfu$$*3
可以產生以下:

<ul>
<li class="wfu01"></li>
<li class="wfu02"></li>
<li class="wfu03"></li>
</ul>


4. 續編功能指定起始數 $@N

前面的續編功能,如果不想從 1 開始,例如從 5 開始編:

ul>li.wfu$@5*3
可以產生以下:

<ul>
<li class="wfu5"></li>
<li class="wfu6"></li>
<li class="wfu7"></li>
</ul>




四、CSS 縮寫


關於 CSS 縮寫這部分,雖然有規則可循,不過還是很吃記憶力,建議自行參考以下網頁:

1. 簡單、常見的 CSS 縮寫介紹,可先看「Emmet 语法速查表」→「CSS 编写」這裡的內容。

2.「官方速查表」列出了詳細的 CSS 縮寫一覽,要很有耐心才能看得下去。



五、高階技巧


1. 高階技巧摘要

這篇「Emmet的高級功能與使用技巧」提供了比較少見、實用的使用技巧:

  • 使用 lorem 指令,可產生各種假內容、假標題,暫時填充版面的空間。
  • 按下熱鍵 Shift + Ctrl+ G,可為某個 HTML 元素,產生母元素內容,而且要包幾層都可以。這有點像是密技,因為一般的 Emmet 操作無法做到這件事。

上面這個密技還值得列出一個範例,如果客戶給了我們 3 個導覽列的項目名稱例如:

首頁
網站導覽
關於我們


將以上文字全部選取,按下熱鍵 Shift + Ctrl+ G,輸入以下母元素內容:

ul.wfu_nav>li.items$*>a
就會立刻產生以下導覽列 HTML 碼:

<ul class="wfu_nav">
<li class="items1"><a href="">首頁</a></li>
<li class="items2"><a href="">網站導覽</a></li>
<li class="items3"><a href="">關於我們</a></li>
</ul>

我只能說:Emmet 真是太神奇了!!

其他更多高階技巧請參考該篇文章。


2. 自訂快捷語法

這個使用方式有點像是某些輸入法的 "詞庫" 功能,例如設定輸入字串 "add" 後,會自動產生建立的詞庫內容 "台北市松山區...." 這樣的完整住址字串。

請參考這篇「自訂Emmet常用的網頁標籤語法並快速輸出」,在 Sublime Text 的 Emmet 系統設定之中,可以設定所有自訂的程式碼片段(snippet)內容,也就是快捷語法。

假設我常常需要輸入以下 WFU BLOG 的網址連結語法:

<a href="http://www.wfublog.com" target="_blank">WFU BLOG</a>

那麼我就可以設定一個快捷字串,例如 "wfu",完成所有設定後,將來只要輸入 "wfu" 並按下 Tab,就會自動產生 WFU BLOG 的網址連結語法了。


3. CSS 命名問題

網頁寫久了,會發現常常要花很多時間想 class 命名、怎麼避免重複字串。

這篇「emmet的css书写与命名技巧」提出的概念滿有意思的,如果我們的 class 命名都能保持一致性,符合一定的模式,那麼只要先命名好母元素的 class 名稱,利用 emmet 的快速鍵將可以快速、自動產生所有子元素的 class 名稱。

由於我的 class 命名技巧還在磨練中,那麼對這個主題有興趣的讀者,可以試試看能否將這個構想實作出來。



六、官網教學


除了本篇提到的這些 Emmet 相關教學網頁,其實官網也提供了滿詳細的教學文件,還有影音說明、線上實地操作等功能,如果覺得英文程度可以挑戰看看的話,不妨參考這些頁面:



更多 HTML 相關文章:


更多 CSS 相關文章:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP