[Day20] Emmet 學習筆記 - 層級篇 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 20

Modern Web

MacOS新手操作指令學習紀錄，成為裝B前端工程師之路系列第 20 篇

[Day20] Emmet 學習筆記 - 層級篇

13th鐵人賽

Genos

2021-09-28 23:56:38

979 瀏覽

分享至

預處理器可以透過加快撰寫程式的速度，但是自己的打字速度提升有限（換了Mac之後還變慢不少），Emmet這個快速產出格式的工具就大有幫助，雖然他已經存在許久，但一直以來都只使用已知的一點功能，今天就來好好學習他到底有哪些方便的寫法。

參考文件
Emmet Cheat Sheet

HTML基本功能

產出基本 HTML結構：!

!  
// 按Tab產出
<!DOCTYPE html>
<html>
.....
// 一些基本設定
....

子標籤：>

ul>li  
//按Tab產出
<ul>
  <li></li>
</ul>

同級標籤：+

p+div  
// 按Tab產出
<p></p>
<div></div>

上層標籤：^ (加幾個就往上幾層)

ul>li^div  
// 按Tab產出
<ul>
  <li></li>
</ul>
<div></div>
// 多個^
ul>li>span^^div  
// 按Tab產出
<ul>
  <li><span></span></li>
</ul>
<div></div>

群組：()

div>(ul>li>span)+div>p
// 按Tab產出
<div>
  <ul>
    <li><span></span></li>
  </ul>
  <div>
    <p></p>
  </div>
</div>

複數生成：*

div*3
// 按Tab產出
<div></div>
<div></div>
<div></div>

標籤帶ID或class(可以混用)：# 和 .

div#a.b.c
// 按Tab產出
<div id="a" class="b c"></div>

標籤帶屬性：[]（中括號）

p[hello="world"]
// 按Tab產出
<p hello="world"></p>

標籤帶文字（textContent）：{}（大括號）

p{hello, world}
// 按Tab產出
<p>hello, world</p>

自動判斷子層標籤格式(某些固定元素搭配可以不打標籤名稱，只打className或ID)

// 預設都是 div
#id+.class
// 按Tab產出
<div id="id"></div>
<div class="class"></div>

// em內層為 span
em>.a
// 按Tab產出
<em><span class="a"></span></em>

// ul內層為 li
ul>.b
// 按Tab產出
<ul>
    <li class="b"></li>
</ul>

// table內層是 tr > td
table>.row>.col
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

帶入變數流水號：$ (用法較多元)

// 1.基本款
div.no$*3
// 按Tab產出
<div class="no1"></div>
<div class="no2"></div>
<div class="no3"></div>

// 2.帶多個變數
div.no$[title=attr$]{Content$}*3
// 按Tab產出
<div class="no1" title="attr1">Content1</div>
<div class="no2" title="attr2">Content2</div>
<div class="no3" title="attr3">Content3</div>

// 3.自定流水號長度
div.no$$$$$*3
// 按Tab產出
<div class="no00001"></div>
<div class="no00002"></div>
<div class="no00003"></div>

// 4.遞減流水號（多一個＠參數）
div.no$@-*3
// 按Tab產出
<div class="no1"></div>
<div class="no2"></div>
<div class="no3"></div>

// 5.指定區間流水號(第一個數字是起始值，第二個數字是產出數量)
div.no$@2*4
// 按Tab產出
<div class="no2"></div>
<div class="no3"></div>
<div class="no4"></div>

div.no$@-2*4
// 按Tab產出
<div class="mo5"></div>
<div class="mo4"></div>
<div class="mo3"></div>
<div class="mo2"></div>

在練習的時候腦子得非常清晰，不然層級多的時候實在很容易卡住！