Home » Web

Emmet 教學 - 複製元素及編號

當我們要產生 ul 清單時,通常需要一次輸出大量的 li,如果要一個一個使用 + 的方式來建立的話,那應該會瘋掉吧。不過在 Emmet 中,這當然都考慮到了。

複製 Multiplication: *

如果想要一次產生一組類似的區塊的話,我們可以使用 * 來當做類似數學的乘法效果,假設需要 5 個一樣的內容就是 *5
emmet_tutorial_series_replication_elements_and_numbering_01

再假設筆者想要再一個 .container 中放置 3 個 .block,然後每個 .block 中都有 1 個 h3 標題及 1 個 p 段落,在 p 段落中放置一些文字及一個 read more 的超連結
emmet_tutorial_series_replication_elements_and_numbering_02

應該比在那邊選取區塊後複製&貼上方便吧!

編號 Item numbering: $

接著再來看喔~一般我們輸出 li 時可能會給它們一個共用的 .className,同時也可能再多一給一個帶有流水序號的 .className,那麼再搭配 Emmet 時也能快速的產生
emmet_tutorial_series_replication_elements_and_numbering_03

使用 $ 錢符號就能自動幫您依序帶入數字了,不過它是從一位數開始累加,如果您的數字是想要固定呈現兩位數或是三位數的話,只要補上相對數量的 $ 即可,例如:.item-$$ 就是會產生 .item-01、.item-02...;.item-$$$ 則是產生 .item-001、.item-002...
emmet_tutorial_series_replication_elements_and_numbering_04

不過預設數字是從 1 開始累加,如果想要指定起始數字的話,要在 $ 後面多補上一個 @ 並加上指定的起始數字,例如 .item-$@6
emmet_tutorial_series_replication_elements_and_numbering_05

最後還能變更的就是要由小大到編號,還是由大到小編號。Emmet 預設的編號是由小到大,如果是要反過來由大到小的話,那麼就是在 @ 後面補上一個 - 負號(就算沒要設定起始值也是要多補 @)
emmet_tutorial_series_replication_elements_and_numbering_06

從範例中能看到若是要起始值且又要由大到小排的話,是要把 - 負號加在數字前面的喔!

發表迴響