---
# System prepended metadata

title: 【Day8】系統性管理開發 part1

---

# 【Day8】系統性管理開發 part1

## HTML縮寫模組---Emmet
按tab即可展開，節省打大於、小於的時間，也能避免自己忘記打結束標籤的情況--->更快速產生HTML結構
- 接「.」後可形成class
![](https://hackmd.io/_uploads/BJmF5xuq3.png)
![](https://hackmd.io/_uploads/S1jY5gucn.png)
- 「+」可串接多個標籤
![](https://hackmd.io/_uploads/S1nbog_52.png)
- 「>」形成層級關係
![](https://hackmd.io/_uploads/HkIRoe_53.png)
補充: 因div是最常見的，可省略，如下圖
![](https://hackmd.io/_uploads/Sy1rhxuch.png)
- 「{ }」填內文
![](https://hackmd.io/_uploads/SytDTeucn.png)
- 「*」應用範例
  1. 兩張卡片
  ![](https://hackmd.io/_uploads/BJWRnlu9h.png)
  2. 清單
  ![](https://hackmd.io/_uploads/rJ2paxu93.png)
- 「$」形成有序編號
![](https://hackmd.io/_uploads/S1gxNAgdqn.png)
- 「[ ]」內填image屬性
![](https://hackmd.io/_uploads/BkopReO5h.png)
![](https://hackmd.io/_uploads/BkfRAlOq3.png)
- 「( )」表群組
![](https://hackmd.io/_uploads/r1gJNYji3.png)
![](https://hackmd.io/_uploads/HJS6xbuch.png)
## HTML樣板語言---jade(別稱:Pug)
優點：
1. 透過縮排看見嚴謹的層級關係，一目了然
2. 不用放結束標籤
3. 呈現的樣子不會那麼混亂

首先到Settings設置前處理器![](https://hackmd.io/_uploads/rJW4OM_9h.png)

- 由「( )」增加屬性(標籤後緊跟著小括弧，沒有空格)
![](https://hackmd.io/_uploads/HJzTqWu9n.png)
點右上角向下箭頭按鈕可預覽編譯成html呈現的樣子
![](https://hackmd.io/_uploads/rkq1o-u92.png)
![](https://hackmd.io/_uploads/H1ggoWOq3.png)
- 利用tab鍵形成層級關係
- 標籤後空一格再填內文
![](https://hackmd.io/_uploads/B1lg6bdqn.png)
編譯成HTML
![](https://hackmd.io/_uploads/HJWGT-d52.png)
- 文字行數過多，若欲將某段空下來
方法：Enter--->tab--->加入「|」符號
  - 原始
![](https://hackmd.io/_uploads/H1Xv0-Oqh.png)
  - 更改後
![](https://hackmd.io/_uploads/BkY_0ZO5n.png)
- 在jade中同樣可使用Emmet縮寫模組
## CSS樣板語言---sass
改善了CSS的三大缺點
1. 每一條樣式後都要加冒號
2. 需要加大括弧包住所有的樣式表
3. 當要表示某元素裡的東西時，需要重複打父元素的名稱，且一列一列打出來無法一目了然，若有上百行、上千行列下來，就會顯得混亂，無法看清誰屬於誰

首先到Settings設置前處理器
![](https://hackmd.io/_uploads/BkbL_M_92.png)

- 不用打「{ }」，也不用打「;」
![](https://hackmd.io/_uploads/S1-qqMdch.png)
編譯成CSS
![](https://hackmd.io/_uploads/SJuAcz_c3.png)
![](https://hackmd.io/_uploads/S1RA9Guq2.png)
- 若要表示某元素裡的子元素，就在父元素裡打「&」--->空白--->子元素的標籤或名稱
![](https://hackmd.io/_uploads/SJav6Mu53.png)
![](https://hackmd.io/_uploads/Hy8u6Muq3.png)
- 變數功能
加「$」以儲存變數
優點：可直接在前幾行快速預覽各變數，往後要更改特定內容只需更改前幾行--->更有系統性地管理特殊內容之顏色、尺寸等
![](https://hackmd.io/_uploads/ByMI1md9n.png)

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::