Emmet前端開發神器

阿新 • • 發佈：2019-02-09

前端開發神器Emmet

1-1 簡介

Emmet是專門給前端開發人員準備的一個快捷開發工具，是從原來的ZenCoding發展而來的，原來的意思是程式碼壓縮輸出，通過極少的程式碼，來快速生成包含大量程式碼的模板。

下面看一個簡單的案例，在編輯工具中編寫如下程式碼

#page>div.logo+ul#nav>li*5>a{導航選單$}

然後按下tab鍵，你會發現，神奇的變化出現了，編輯工具中程式碼變成了如下程式碼：

</ul>

</div>

怎麼樣，現在看到ZenCoding，或者說Emmet要做的事情有多麼的神奇了吧？！

1-2 IDE工具中使用Emmet

首先，Emmet作為一個高速提升前端開發效率的工具，已經被很多的IDE工具支援了，諸如當前流行的一些工具如Dreamweaver、HBuilder、WebStrom等等，這些工具中直接使用Emmet語法就可以實現程式碼的快速編輯了。

同樣的，在我們進行維護的過程中，使用的工具並不是前面提到的半自動化的工具，而是超級記事本如Editplus、Ultraedit、Sublime等等，對於這樣的工具，都有各自的外掛已經提供了對Emmet的支援，如sublime中可以通過package install來搜尋安裝Emmet外掛，安裝完成後就可以直接在sublime中使用emmet語法快速編輯程式碼了！

1-3 Emmet語法之HTML操作

這裡直接上乾貨，相信開始關注emmet的程式設計師，已經是比較專業的前端開發人員了。

SO，廢話不說了。

1-3-1 快速生成標籤

書寫標籤名稱，然後按下tab鍵即可完成一個標籤的輸入

div	<div></div>

1-3-2 標籤id,class屬性

書寫標籤名稱，在標籤後面使用符號“#”來指定標籤的id名稱，使用符號“.”來指定標籤的class屬性名稱，是不是和css語法有點類似呢？Bingo！

div#logo	<div id=”logo”></div>
div.nav	<div class=”nav”></div>
div#box.detail	<div id=”box” class=”detail”></div>

1-3-3 標籤其他屬性操作

書寫標籤名稱，在標籤的後面，新增一堆方括號，在方括號中新增屬性的名稱和屬性值，就可以對標籤的屬性內容進行指定了。

img[src=”imgs/bg.png”]

1-3-4 標籤內容操作

書寫標籤名稱，在標籤的後面，新增一對大括號“{}”，在大括號的內部新增內容，然後按下tab鍵，就可以在生成的標籤中間新增指定的內容

div{this is content}

<div>this is content</div>

1-3-5 生成多個標籤

書寫標籤名稱，在標籤的後面，緊跟符號“*”，然後寫上要輸出的整數數量，就可以讓某個指定的標籤同時出現多個，同時可以通過符號“$”對內容進行編號

div{test$ content$$}*5

<div>test1 content01</div>

<div>test2 content02</div>

<div>test3 content03</div>

<div>test4 content04</div>

<div>test5 content05</div>

同時可以在$符號後面緊跟一個符號@，用於指定編號的起始數字和排列順序

div{[email protected]}*3

div{[email protected]}*3

1-3-6 生成父子標籤

書寫父標籤名稱，然後緊跟符號“>”，後面寫子標籤名稱，就可以自動轉換成父子標籤

ul>li{item$}*3

<ul>

</ul>

1-3-7 生成同級標籤

書寫標籤，然後緊跟符號“+”，後面寫同級別的其他標籤，就可以自動轉換成同級別標籤

div{test}+p{p content}

<p>p content</p>

1-3-8 生成父級同級標籤

書寫標籤名稱，在其子標籤的後面，新增符號“^”，繼續編寫其他的標籤，此時在“^”後面生成的標籤，是和父級標籤同級別的標籤

div>a[href=”http://www.baidu.com”]{BAIDU}^div{description info}

<div>

<a href=”http://www.baidu.com”>BAIDU</a>

</div>

<div>

description info

</div>

1-3-9 通過分組簡化Emmet語法

一旦涉及到一次輸出父子標籤，同時父級標籤還有同級標籤的情況下，會比較麻煩，可以通過新增圓括號“()”進行標籤分組來簡化Emmet語法結構，參考程式碼如下：

(div>a[href=”http://www.baidu.com”])+(div{description info})

<div>

<a href=”http://www.baidu.com”>BAIDU</a>

</div>

<div>

description info

</div>

使用分組能極大程度的簡化Emmet複雜的語法結構，如下案例：

# 不使用分組編寫的一段Emmet語法

header>ul#nav>li*5>a[href="#"]{menu$}^^^div#container{body content}^footer>ul>li*10>a{friend links}

# 使用分組編寫的一段Emmet語法

(header>ul#nav>li*5>a[href="#"]{menu$})+(div#container{body content})+(footer>ul>li*10>a{friend links})

注意觀察，可以看到分組的語法，會相對來說更加切合我們的思路，最終生成的程式碼如下

同樣的，我們可以看到Emmet給我們帶來了多大的便利！

</ul>

</header>

<div id="container">body content</div>

<ul>

<li><a href="">friend links</a></li>

</ul>

</footer>

1-4 Emmet語法之CSS操作

Emmet同時對CSS也進行了程式碼壓縮輸出，在一定程度上簡化了CSS語法的繁瑣程度，但是樣式操作根據個人開發習慣可以適當使用，畢竟樣式的操作在一定程度上調整的頻率較大

1-4-1 簡寫CSS屬性

通過簡寫屬性名稱和屬性值，完成程式碼的快捷輸出，如：

w100	width:100px;
w100p	width:100%;
w100r	width:100rem;
h100	height:100px;
h100p	height:100%;
h100r	height:100rem;
bd10	border:10px;
bg#0	background:#000;
bgc#20	background-color:#202020
bgi	backgoround-image:url()
fsi	font-style: italic;
fz16	font-size:16px;
fw100	font-weight:100;
bd5#8s	border:5px #888 solid;
bdrs5	border-radius:5px;
bdl2	boder-left:2px;

1-4-2 簡寫多個屬性

某些情況下，我們會簡寫樣式語法，如margin值，會控制上、右、下、左各個方向的外邊距資料，此時，通過中劃線”-”來拆分多個數據

mg10-20-30-40

margin:10px 20px 30px 40px;

1-4-3 一次生成多條語句

如果我們對樣式已經非常熟悉了，可以通過Emmet語法來一次性生成多條樣式語句，通過符號“+”來連線。

h10p+m5e

height:10%;margin:5em;

1-4-4 顏色操作

顏色資料在Emmet中主要通過16進位制的方式進行處理，簡要語法如下

bd5#0s	border:5px #000 solid;
規則方式
#0	#000;
#80	#808080;
#fc0	#ffcc00;

1-4-5 擴充套件選項

CSS3標準中增加了很多新的語法格式，如字型設定@font-face

通過@f可以生成簡單結構

通過@f+可以生成比較完整的結構

@font-face{

font-family:;

src:url();

}

@f+

@font-face {

font-family: 'FontName';

src: url('FileName.eot');

src: url('FileName.eot?#iefix') format('embedded-opentype'),

url('FileName.woff') format('woff'),

url('FileName.ttf') format('truetype'),

url('FileName.svg#FontName') format('svg');

font-style: normal;

font-weight: normal;

}

</style>

</head>

<body>

1-4-6 瀏覽器相容性字首

在樣式屬性的前面，增加一個符號“-”，可以生成支援不同瀏覽器的樣式屬性

-transform

-webkit-transform: ;

-ms-transform: ;

-o-transform: ;

transform: ;

-animation

-webkit-animation-timing-function: ease-in-out;

-o-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

1-4-7 漸變背景

CSS3中新增加了linear-gradient樣式屬性，可以直接製作漸變效果，這個效果引數較為複雜，而且需要新增不同瀏覽器的字首操作。不過可以通過lg()來快速生成。

lg(left,#f 50% #0)

Emmet前端開發神器

前端開發神器Emmet

1-1 簡介

1-2 IDE工具中使用Emmet

1-3 Emmet語法之HTML操作

1-3-1 快速生成標籤

1-3-2 標籤id,class屬性

1-3-3 標籤其他屬性操作

1-3-4 標籤內容操作

1-3-5 生成多個標籤

1-3-6 生成父子標籤

1-3-7 生成同級標籤

1-3-8 生成父級同級標籤

1-3-9 通過分組簡化Emmet語法

1-4 Emmet語法之CSS操作

1-4-1 簡寫CSS屬性

1-4-2 簡寫多個屬性

1-4-3 一次生成多條語句

1-4-4 顏色操作

1-4-5 擴充套件選項

1-4-6 瀏覽器相容性字首

1-4-7 漸變背景

相關推薦