台中前端社群
台中前端社群
Taichung Frontend Group
Emmet
讓你開發快如閃電的利器
黃竹藝
- a.k.a Chuyi Huang
- ROR開發者
- 朝成為前端工程師的目標前進
Why ?
為什麼要快速開發?
時間就是金錢
早點下班才是真的!
How ?
網站開發更快 錯誤更少?
- 程式片段重複使用 (html)
- 利用template engine (html)
- 使用預處理器(Preprocessor) (js, css)
- 使用編輯器工具縮短開發時程
程式片段重複使用 - 1
程式片段重複使用 - 2
利用template engine
- Haml
- Jade
- Slim
- more...
Haml
http://haml.info/
Jade
http://jade-lang.com/
Slim
http://slim-lang.com/
使用預處理器(Preprocessor)
- SASS, Stylus & LESS for CSS
- CoffeeScript & LiveScript for JS
SASS
- 變數 Variables
- 巢狀 Nesting
- 多檔案 Partials
- 載入 Import
- 混搭 Mixins
- 延伸/繼承 Extend/Inheritance
- 計算 Operators
LESS
- 變數 Variables
- 混搭 Mixins
- 巢狀 Nested rules
- 計算 Operations
- 功能 Functions
- 區域空間&繼承 Namespaces & Accessors
- 作用範圍 Scope
- 註解 Comment
CoffeeScript
LiveScript
- LiveScript(1995)
- JavaScript(1995)
- ECMAScript(1996/1997)
- *LiveScript(2011) 預處理器
Emmet
the essential toolkit for web-developers
Why Emmet?
- 支援Html與CSS
- 概念清楚
- 支援許多編輯器
- 文件支援佳
- 容易上手
- 操作有趣
Zen Coding
Zen Coding => Emmet
Emmet支援的編輯器
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: 更多功能
依據不同編輯器會有不同行為
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)