sketch根據(jù)Emmet命名方式導(dǎo)出html片段Sketch Emmet

Sketch Emmet插件可以幫你在sketch中通過Emmet命名方式導(dǎo)出HTML片段，Emmet語法可以幫助程序員快速的編寫 HTML 和 CSS 代碼，如果你需要這款插件可以來西西下載使用。

使用方法：

按照 Emmet 縮寫語法組織和命名組/層，然后執(zhí)行 Plugins > Sketch Emmet > Get Emmet Snippet 或直接在 Runner插件下輸入 Emmet 執(zhí)行獲得代碼片段操作，代碼片段會暫存于剪貼板，于編輯器粘貼后使用快捷鍵 tab 即可展開代碼完成操作

如果想忽略或阻止一個或者一組圖層被復(fù)制輸出，前綴以 % 字符為開頭，以一個空格與圖層名隔開

如果輸出一張位圖，使用前綴或名稱為 img 會自動添加寬度和高度屬性，還可添加 class 和 id 及 url 屬性，例如：

img

img.classname

img.classname#id

img.classname#id[src=#]

文本層只輸出里面的文字，除非指定一個適當?shù)?HTML 標簽名稱

p

h1

h2

h3

p.classname

p.classname#id

p.classname#id[attribute=value]

了解更多 Emmet 語法可查看 官方語法速查表

使用提示：

首先需要 Emmet 插件官方 下載地址 找到對應(yīng)支持的編輯器，并下載對應(yīng)插件

以 Sublime Text 為例：可直接在該編輯器里使用快捷鍵 command ⌘ + shift ⇧ + P 輸入 install 找到如下圖所示包安裝

等待左下角進度完成后，在彈出的層輸入 Emmet 完成安裝

粘貼插件生成的代碼片段后，需再次使用快捷鍵 command ⌘ + shift ⇧ + P 輸入 ssh 將當前文檔轉(zhuǎn)為 HTML 編碼模式

最后執(zhí)行 tab 完成操作