emmet高級技巧

編寫好HTML和CSS代碼時，咱們也須要修改或添加一些內容，Emmet提供了不少很是獨特的工具，能夠大大提升編輯體驗，下面咱們挑選幾個經常使用的功能來介紹。

薩龍龍發如今sublime text中安裝的Emmet插件的快捷鍵與官方的演示文檔中提供的快捷鍵不同，這時咱們就要修改Emmet快捷鍵或者查找在sublime text中的Emmet快捷鍵。

修改快捷鍵，打開PreFerences——Package Settings——Emmet中進行修改，只查看快捷鍵，好比：Match Tag Pair快捷鍵，打開工具中的命令面板ctrl+shift+p，輸入：match就能夠查看到。

本文的使用到的快捷鍵與官方演示中的快捷鍵同樣。

一、展開縮寫（Expand Abbreviation） Demo

這個功能在一開始介紹Emmet時就已經介紹，這是Emmet最核心的功能。

二、生成測試文本Lorem Ipsum Demo

在編寫HTML代碼時，有時須要添加一些內容，Emmet提供了一段隨機的看不懂的英文字段，做爲測試數據咱們就能夠調用。而生成Lorem Ipsum文本也很是簡單，輸入lorem，按Tab鍵，就能夠生成下面這段文字：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, non, minima, voluptas ducimus
voluptatem perspiciatis id delectus maiores saepe porro aliquam sunt pariatur eaque. Enim,
voluptatem nesciunt voluptate ad veritatis.

Emmet的lorem這一功能不只僅只爲生成一段文本，使用lorem默認生成30個單詞的文本，能夠爲它指定單詞的數量來隨機生成一大段文本。

三、若是要生成標題呢，只需減小單詞的數量，好比：lorem4將生成下面的標題：

Lorem ipsum dolor sit.

上面的例子只是生成單獨的測試文本，與HTML標籤一塊兒編寫也很簡單，就像Emmet快速編寫HTML代碼文章中生成父子關係的代碼同樣：

h2>lorem4

將生成：

<h2>Lorem ipsum dolor sit.</h2>

p*4>lorem4

將生成：

<p>Lorem ipsum dolor sit.</p>
<p>Dolores, similique veritatis reprehenderit.</p>
<p>Cupiditate repudiandae numquam earum.</p>
<p>Atque, sequi autem praesentium?</p>

因此lorem爲咱們提供了強大的測試數據，提升了編寫HTML代碼的速度，讓咱們專心編寫代碼。

四、擴展縮寫（Wrap with Abbreviation）Demo

一個很是強大的功能，在當前HTML代碼的基礎上添加縮寫，將向外擴展代碼，好比這段代碼，光標在p標籤上或者外部：

<div id="page">
    <p>Hello world</p>
</div>

再按shift+ctrl+g，彈出：Enter Wrap Abbreviation（輸入擴展縮寫），在其中輸入：

.wrapper>h1{Title}+.content

將獲得：

<div id="page">
    <div class="wrapper">
        <h1>Title</h1>
        <div class="content">
            <p>Hello world</p>
        </div>
    </div>
</div>

五、把文本轉換成HTML標籤

當客戶給咱們提供了一個文本文檔，把標題複製過來，好比：

首頁
公司簡介
公司動態
關於咱們
聯繫咱們

轉換成導航，選擇文本，再按shift+ctrl+g，彈出：Enter Wrap Abbreviation（輸入擴展縮寫），在其中輸入：

nav>ul.nav>li.nav-item$*>a

將獲得：

<nav>
    <ul class="nav">
        <li class="nav-item1"><a href="">首頁</a></li>
        <li class="nav-item2"><a href="">公司簡介</a></li>
        <li class="nav-item3"><a href="">公司動態</a></li>
        <li class="nav-item4"><a href="">關於咱們</a></li>
        <li class="nav-item5"><a href="">聯繫咱們</a></li>
    </ul>
</nav>

注意，導航中有5個菜單，這裏不須要在li標籤後面使用*5，只需使用單獨的操做符*就能夠。

若要設置class="nav-item001"，則用：

nav>ul.nav>li.nav-item$$$*>a

六、刪除文本中的列表標記

word文檔中的文本不少都是列表塊，好比：

1.首頁
2.公司簡介
3.公司動態
4.關於咱們
5.聯繫咱們

在編寫HTML代碼又不須要，Emmet讓咱們能夠刪除文本中的標記，在上一功能的縮寫的基礎代碼的後面添加|t就能夠刪除文本中的標記:

nav>ul.nav>li.nav-item$*>a|t

最終獲得的HTML代碼與上面的效果是同樣的，你能夠試試！

七、控制文本的輸出位置

默認狀況下，用Emmet把文本轉換爲HTML代碼時，使用$#操做符Emmet能夠將文本輸出到多個元素中，而$#平上Emmet縮寫語法中的一部分，因此得將$#放在屬性值[]或文本{}操做符中。

以上面的導航文本爲例，在Enter Wrap Abbreviation中輸入：

ul>li[title=$#]*>{$#}+img[alt=$#]

將獲得：

<ul>
    <li title="首頁">首頁<img src="" alt="首頁"></li>
    <li title="公司簡介">公司簡介<img src="" alt="公司簡介"></li>
    <li title="公司動態">公司動態<img src="" alt="公司動態"></li>
    <li title="關於咱們">關於咱們<img src="" alt="關於咱們"></li>
    <li title="聯繫咱們">聯繫咱們<img src="" alt="聯繫咱們"></li>
</ul>

八、分解與添加標籤（Split/Join Tag）Demo

光標在標籤上時，按ctrl+j，能夠將標籤：

<div></div>

轉換爲

<div />

標籤，反之亦然。當div中有內容時，使用這一功能同樣會轉換成上一標籤，其中的內容也將刪除，因此使用的時候咱們也須要注意。

九、映射CSS屬性值（Reflect CSS Value）Demo

爲了瀏覽器的兼容性，CSS樣式中有不少帶有屬性值的前綴樣式，若是修改值，須要修改好幾個處，好比：

div {
    padding: 10px;
    -webkit-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    -o-transform: rotate(50deg);
    transform: rotate(50deg);
    opacity: 0.7;
    filter: alpha(opacity=70);
}

在Emmet中咱們只需修改旋轉屬性值的其中一個，再按ctrl+shift+r快捷鍵，其它相關的屬性值也相應的改變。

十、選擇匹配標籤（Match Tag Pair）Demo

在咱們編寫HTML代碼時，須要選擇開始標籤到閉合標籤中的代碼，通常咱們就用鼠標框選，雖然不是太麻煩，但Emmet爲咱們提供了更加方便、快捷的功能，擴大與縮少選擇。

在鼠標光標處按快捷鍵ctrl+d，將會選擇光標所在標籤範圍內的全部內容，屢次運行將擴大選擇。有擴大就有縮小，快捷鍵：crtl+shift+d，屢次運行將縮小選擇範圍。

十一、轉到匹配的標籤（Go to Matching Pair）Demo

在開始標籤與閉合標籤中跳轉，快捷鍵：ctrl+t。在編寫大型HTML文件時，老是找不到匹配的閉合標籤，Emmet提供的這一功能就能夠方便的爲咱們在開始與閉合標籤中輕鬆地跳轉。

十二、跳轉到文本編輯點（Go to Edit Point）Demo

這個功能適合在標記之間、空屬性和空的文章標籤中進行上下跳轉，好比title、a、li、href、src等等須要輸入內容的標題中。上一個，下一個編輯點快捷鍵分別爲ctrl+alt+left、ctrl+alt+right。

1三、添加與刪除註釋（Toggle Comment）Demo

以前在添加註釋時都是一個符號一個的敲出來的，真有點辛苦，也很煩。Emmet提供的註釋開關功能太棒了，只需使用ctrl+/快捷鍵就能夠添加與刪除註釋，不過其註釋的範圍是以行爲單位，在HTML和CSS代碼中均可以使用。

1四、移除標籤（Remove Tag）Demo

在一些大型的HTML代碼中，有時標籤嵌套的太多，經過Emmet移除標籤這一功能，快速的移除多餘的匹配的開始標籤與閉合標籤，快捷鍵：ctrl+shift+;(in windows)。

1五、更新圖片大小（Update Image Size）Demo

不少時候在編寫HTML代碼中的img標題與CSS樣式中的background-image時，須要知道圖片的寬度與高度，老是在電腦中找到圖片查看其尺寸，浪費時間又很不爽。而Emmet爲咱們提供這一功能，只需將光標移動到img或background-image標籤上，按下ctrl+u(in windows)，Emmet會自動讀取圖片的尺寸並添加。

前提是引用的圖片地址正確且存在，並且路徑中不能有中文，必需是英文字符，否則把鍵盤敲爛也不會有反應。

1六、數字遞增/遞減（Increment/Decrement Number）Demo

數字遞增/遞減，能夠以0.一、1和10三個值進行遞增/遞減，快捷鍵分別是：ctrl+up/down、alt+up/down和ctrl+alt+up/down。

1七、數學計算表達式（Evaluate Math Expression）Demo

有了Emmet在HTML和CSS文件中均可以進行簡單的數字運算，神奇了，輸入4*8再按ctrl+shift+y，Emmet能給出最終的結果。

1八、將圖片編譯成data:URL模式（Encode/Decode Image to data:URL）Demo

data:URL模式，是利用base64編碼把圖片數據翻譯成標準ASCII字符，在本地直接繪製圖片，不是從服務器加載，減少HTTP請求，從而提升網頁的加載速度。

將圖片轉換成data:URL模式，Emmet爲咱們提供的最簡便、快速的方法，將光標放在img或background-image標籤的圖片上，按ctrl+shift+b快捷鍵，完美的轉換。

 

原文出至：http://yfdxs.com/emmet-advanced.html

參考：http://docs.emmet.io/actions/expand-abbreviation/

標紅處作出了修改