Home » Web

Emmet 教學 - 自訂屬性

有網友透過即時聊天系統來詢問說:「若當 HTML 產生後也存檔又重新開啟,但想要再調整某區塊或是一大塊的內容的話,那有辦法再還原成 Emmet 語法片段嗎?」,Emmet 其實只是設計在編寫過程中使用,但一但產生後就不可逆了,所以我建議該網友,若可以的話,可以參考使用一些 HTML 的樣板引擎,像是 Haml 或 Jade 等等。

Jade 的部份梅干有寫一篇JADE基本使用教學:規則、文字、繼承、匯入、函式寫法Jade(HTML)+SCSS(CSS)實戰應用課程,有興趣的人可以參考學習。

回到主題吧~我們在前幾篇的教學中已經學會如何快速輸出元素了,但除了 id 跟 class 之外,其它輸出的屬性都是 Emmet 內建的一些基本必須的,如果是再編寫過程中想要針對屬性來自訂的話,那...要如何來寫呢?

自訂屬性 Custom attributes: [attr]

如同在 CSS 中選擇器中篩選元素屬性的用法一樣,在 Emmet 中一樣是使用 [] 中括號的方式來表示要自訂屬性
emmet_tutorial_series_exploring_custom_attributes_01

如果一次想要自訂多個屬性的話,只要在同一個 [] 中括號中將每個屬性用空格隔開就可以了。假設筆者要產生一個超連結連到 http://abgne.tw 並用另開視窗的方式的話:
emmet_tutorial_series_exploring_custom_attributes_02

屬性的值用雙引號或單引號來包裹在 Emmet 中都是允許的,甚至不包也可以
emmet_tutorial_series_exploring_custom_attributes_03

但要注意的話,若屬性值中有空格的話,那就一定得選用雙引號或單引號。畢竟 Emmet 自訂多屬性是用空白當區隔的
emmet_tutorial_series_exploring_custom_attributes_04

仔細看,一開始 data-title 值是寫成 'Emmet is cool',所以可以產生正確的屬性內容,不過若沒用雙引號或單引號包裹字串的話,就會變成 is 跟 cool 都是自訂屬性了。從這個錯誤的範例也能看到一個技巧,如果只有寫屬性但沒給值的話,一樣會產生該屬性,只是值為空字串而已。

發表迴響