5分鐘學會EmmetSyntax常用語法

5分鐘學會Emmet Syntax

習慣在一切事物上都是個卓越的教師。 - 大普林尼

---

基本語法

類別	使用語法	說明
Child: >	nav>ul>li	巢狀元素
Sibling: +	div+p+bq	同層元素
Multiplication: *	ul>li*5	複數元素
Item numbering: $	ul>li.item$*5	項目編號
Text: {}	a{Click me}	內容文字
Implicit tag names	ul>.class	ul自動判斷下層li

---

HTML 相關語法

• All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>.

類別	使用語法	說明
Alias of html:5	!	建立基本html文檔
link	link:css	CSS外部連結
	link:favicon	favicon圖示連結
	link:touch	apple-touch-icon
meta	meta:vp	viewport固定縮放比
input	input:text, input:t	input:text
	input:password, input:p	input:password
	input:submit, input:s	input:submit
	input:button, input:b	input:button
	input:search	input:search
	input:email	input:email
	input:reset	input:reset
button	button:submit, button:s, btn:s	button:submit
	button:reset, button:r, btn:r	button:reset
	button:disabled, button:d, btn:d	button:disabled
Alias of blockquote	bq	引用
Alias of embed	emb	外嵌檔案
other	ul+	Alias of ul>li
	table+	Alias of table>tr>td
	tr+	Alias of tr>td
	select+	Alias of select>option

---

CSS 相關語法

• CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh.

Visual Formatting

類別	使用語法	說明
Visual Formatting	pos	position:relative;
	pos:a	position:absolute;
	z	z-index: ;
	z:a	z-index:auto;
	fl	float:left;
	cl	clear:both;
	d	display:block;
	v	visibility:hidden;
	v:v	visibility:visible;
	ov	overflow:hidden;
	ov:s	overflow:scroll;
	ovx	overflow-x:hidden;
	ovy	overflow-y:hidden;
	cp:r	clip:rect(top right bottom left);
	cur	cursor:${pointer};

---

Box Sizing

類別	使用語法	說明
Box Sizing	bxsh	box-shadow:inset hoff voff blur color;
	bxsh:r	box-shadow:inset hoff voff blur spread rgb(0, 0, 0);
	bxsh:ra	box-shadow:inset h v blur spread rgba(0, 0, 0, .5);
	maw	max-width: ;
	mih	min-height: ;

---

Font

類別	使用語法	說明
Font	f+	font:1em Arial,sans-serif;
	fw	font-weight: ;
	fz	font-size: ;
	ff:a	font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
	ff:t	font-family: “Times New Roman”, Times, Baskerville, Georgia, serif;

---

Text

類別	使用語法	說明
Text	va	vertical-align:top;
	ta	text-align:left;
	ta:c	text-align:center;
	td	text-decoration:none;
	tt	text-transform:uppercase;
	tt:c	text-transform:capitalize;
	tt:l	text-transform:lowercase;
	tsh	text-shadow:hoff voff blur #000;
	lh	line-height: ;
	lts	letter-spacing: ;
	whs	white-space: ;

---

Background

類別	使用語法	說明
Background	bg	background:#000;
	bg+	background:#fff url( ) 0 0 no-repeat;
	bgc	background-color:#fff;
	bgcp	background-clip:padding-box;
	bgsz:cv	background-size:cover;
Color	c:ra	color:rgba(0, 0, 0, .5);
	op	opacity: ;

---

Border

類別	使用語法	說明
Border	bd+	border:1px solid #000;
	bdr+	border-right:1px solid #000;
	bdr:n	border-right:none;
	bdb+	border-bottom:1px solid #000;
	bdrs	border-radius: ;
Lists	lis:n	list-style:none;

---

Others

類別	使用語法	說明
Others	!	!important
	@f	@font-face { font-family: ; src:url(); }
	@kf	@-webkit-keyframes identifier { from { } to { } } @-o-keyframes identifier { from { } to { } } @-moz-keyframes identifier { from { } to { } } @keyframes identifier { from { } to { } }
	@m, @media	@media screen { }
	tov	text-overflow:${ellipsis};
flex	jc	justify-content: ;
	ac	align-content: ;
	ai	align-items: ;
	as	align-self: ;
	fx	flex: ;
	fxd:c	flex-direction:column;
	fxw	flex-wrap: ;
	fxg	flex-grow: ;
	fxsh	flex-shrink: ;
	fxb	flex-basis: ;
	ord	order: ;
animation	anim-	animation:name duration timing-function delay iteration-count direction fill-mode;
	animdur	animation-duration:0s;
	animtf:cb	animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);
	animdel	animation-delay:time;
	animic:i	animation-iteration-count:infinite;
	animdir:r	animation-direction:reverse;
	animfm	animation-fill-mode:both;
	animps	animation-play-state:running;
transform	trf:r	transform: rotate(angle);
	trf:sc	transform: scale(x, y);
	trf:t	transform: translate(x, y);
transition	trs	transition:prop time;

---