台中前端社群

Taichung Frontend Group

TALK #1

emmet

Emmet

讓你開發快如閃電的利器

黃竹藝

  • a.k.a Chuyi Huang
  • ROR開發者
  • 朝成為前端工程師的目標前進

Why ?

為什麼要快速開發?

時間就是金錢

早點下班才是真的!

How ?

網站開發更快 錯誤更少?

  • 程式片段重複使用(html)
  • 使用預處理器(html)
  • 使用預處理器(js & css)
  • 使用編輯器工具縮短開發時程

程式片段重複使用 - 1

程式片段重複使用 - 2

使用預處理器(html)

  • Haml
  • Jade
  • Slim
  • more...

Haml

http://haml.info/

haml

Jade

http://jade-lang.com/jade

Slim

http://slim-lang.com/

slim

使用預處理器(js & css)

  • SASS, Stylus & LESS for CSS
  • CoffeeScript & LiveScript for JS

SASS

sass
  • 變數 Variables
  • 巢狀 Nesting
  • 多檔案 Partials
  • 載入 Import
  • 混搭 Mixins
  • 延伸/繼承 Extend/Inheritance
  • 計算 Operators

LESS

  • 變數 Variables
  • 混搭 Mixins
  • 巢狀 Nested rules
  • 計算 Operations
  • 功能 Functions
  • 區域空間&繼承 Namespaces & Accessors
  • 作用範圍 Scope
  • 註解 Comment

CoffeeScript

coffeescript

LiveScript

livescript
  • LiveScript(1995)
  • JavaScript(1995)
  • ECMAScript(1996/1997)
  • *LiveScript(2011) 預處理器
emmet

Emmet

the essential toolkit for web-developers

Why Emmet?

  • 支援Html與CSS
  • 概念清楚
  • 支援許多編輯器
  • 文件支援佳
  • 容易上手
  • 操作有趣

Zen Coding

Zen Coding  =>  Emmet

Emmet支援的編輯器

http://emmet.io/

HTML: 使用CSS Syntax

  • HTML tags
  • # = id
  • . = class
  • > = 層次
  • [] = attributes
  • {} = 內容
  • 非CSS的其他符號 : + * ^ $ @ ()

HTML: HTML tags

  • div + tab = <div></div>
  • iframe + tab = <iframe></iframe>
  • h1 + tab = <h1></h1>
  • table + tab = <table></table>

HTML: # = id

  • #nav + tab = <div id="nav"></div>
  • h2#title + tab = <h2 id="title"></h2>
  • aside#pic + tab = <aside id="pic"></aside>
  • table#info + tab = <table id="info"></table>

HTML: . = class

  • .home + tab = <div class="home"></div>
  • h2.title + tab = <h2 class="title"></h2>
  • aside.pic + tab = <aside class="pic"></aside>
  • table.info + tab = <table class="info"></table>

HTML: > = 層次

  • ul>li + tab = <ul><li></li></ul>
  • table>tr>td + tab =
    <table><tr><td></td></tr></table>

HTML: > = 層次

[] = attributes

  • input[type=text] + tab = <input type="text" >
  • section[data-remote=xxx] + tab =
    <section data-remote="xxx"></section>

{ } = 內容

article>h1{文章的標題}

HTML: 非CSS的其他符號 :

快選符號

  • html:5 html:4s html:4t html:xt ...
  • input:r input:s input:i input:f ...
  • meta:vp meta:utf meta:win ...
  • link:css link:rss link:print link:favicon ...
  • form:post form:get
  • 更多...

HTML: 非CSS的其他符號 +

串聯兩個以上標籤

art>h1{文章標題}+h2{文章副標題}

HTML: 非CSS的其他符號 *

重複符號

建立一個2*3的table
table>tr*2>td*3

HTML: 非CSS的其他符號 ^

跳脫符號

建立一個有th與tr的table
table>th>td*2^tr*2>td*2

HTML: 非CSS的其他符號 $

序列符號

填入數字序列資料
ul>li{編號$$$}*5
ul>li#item$*5

HTML: 非CSS的其他符號 @

序列起始符號

設定序列起始值
ul>li{編號$$$@5}*5
ul>li#item$@-*5

HTML: 非CSS的其他符號 ()

群組符號

將太長的內容群組起來
table>(thead>th>td*2)(tbody>tr*2>td*2)

HTML: 應用方式

sect>(header>h1{文章標題$$$@3}+p{Lorem Ipsum})(#main>(art[data-show=private]{Lorem Ipsum}+table>tr*5>td*4)+form:get.myform>label[for=name]{name:}+input:t#name[value=nothing]+label[for=gender]{gender:}+input:r#gender[value=male]+input:s[value=submit])(footer.info>nav>ul>li.item>a:link*3+a:mail)

HTML: 註解

編輯註解更方便
Sublime Text2: cmd + alt + /
CSS也適用

HTML: 更多功能

依據不同編輯器會有不同行為
https://github.com/sergeche/emmet-sublime#readme

CSS: 屬性簡寫

t, b, l, r = top, bottom, left, right
d, z, m, p = display, z-index, margin, padding
mt, pr, bg = margin-top, padding-right, background
ov:h, td:n, ta:l = overflow:hidden, text-decoration:none, text-align:left
lis:n, tsh:r = list-style:none, text-shadow: rgb(0,0,0)

CSS: 數字/單位縮寫

m10 = margin:10px;
m10-20 = margin: 10px 20px;
p10-20-30-40 = padding: 10px 20px 30px 40px;
w100, w100%, w100e = width:100px;   width:100%;   width:100em;
h:auto, h100! = height: auto;   height:100px !important;

CSS: CSS3支援

  • Before: 依據不同瀏覽器設定不同屬性...
  • border-radius:
  • -o-border-radius:
  • -webkit-border-radius:
  • -moz-border-radius:

CSS: CSS3支援

  • After: 服用Emmet 一定搞定!
  • 輸入 bdrs + tab

CSS: Linear gradients (DEMO)

  • bgaf = background-attachment:fixed
  • lg(green, yellow)
  • lg(green 30%, yellow)
  • lg(left green 20%, blue 40%, yellow)
  • lg(top left, blue 10%, red 20%, green)

參考資料

Thank You