Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
[0503] 使用Sublime Text編輯HTML/CSS: Emmet + LiveStyle
F2E桃園
May 03, 2014
Programming
0
360
[0503] 使用Sublime Text編輯HTML/CSS: Emmet + LiveStyle
F2E桃園
May 03, 2014
Tweet
Share
More Decks by F2E桃園
See All by F2E桃園
f2e_taoyuan
1
160
Other Decks in Programming
See All in Programming
zsmb
1
120
freekmurze
0
190
shin1x1
0
590
ufoo68
1
170
thatjeffsmith
0
350
blendthink
0
390
masayaaoyama
4
530
hr01
0
1.6k
mizdra
7
4.8k
akatsukinewgrad
0
130
inoue2002
0
260
mu2in
0
130
Featured
See All Featured
dotmariusz
94
5.1k
eileencodes
113
25k
jakevdp
774
200k
cassininazir
347
20k
samanthasiow
56
6.3k
jonyablonski
14
1.1k
cromwellryan
101
5.9k
lauravandoore
437
28k
tanoku
86
8.5k
colly
66
3k
addyosmani
494
110k
cherdarchuk
71
260k
Transcript
Դ͜Sublime Textᇜ፨)5.-CSS: Emmet + LiveStyle ymcheung
About ymcheung - 中央大學企管系/元智大學資訊傳播碩士班 - 從高中開始自學網頁設計 - 從當兵開始做平面設計 - ymcheung.org/bookmark
前端設計相關的文章翻譯
Share Something
Recent Works (Visual) Taoyuan County Government Campaigns Poster/Flyer & Invitation
! Double-side business card
Currently learning - Sass (with Fire.app) - jQuery @Codeschool.com -
Sketch.app
Personal Reading List - Behance (Branding, Web Design) - Zite
(CSS, jQuery, Web, Wordpress) - Dribbble (Popular) - Pinterest (Print Design) - Kickstarter - Flipboard (UI Design) - Feedly/RSS (Codrops, Co.Design, Beautiful Pixels…)
Sublime Text + Livestyle
Sublime Text/Setup - Package Control(搜尋:sublime package control) https://sublime.wbond.net/installation - 按ctrl
+ ` 或 View > Show Console - import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http:// sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
Emmet Installation - Sublime Text 2 > Preference >
Package Control > Package Control: Install Packages - Emmet
Emmet Documentation - http://docs.emmet.io/
Emmet: Basic html:5 ! > 巢狀結構(child) header>div>p + 依序排列(sibling) header+div+div+footer
綜合 header>div+div+p 群組 div>(header>div+p)*2+p tab
Emmet: Basic - HTML with id, class & attributes
div#heading div.menu img[title=“Main Logo”] - 乘法 Multiplication & 序號 Numbering ul>li*5 ul>li.menu$*5 ul>li.menu$$$*5 - More at: http://docs.emmet.io/
Emmet: CSS Abbreviations - m: margin:; - pl padding-left; -
ov:h overflow: hidden; - bgc:#1 background-color:#111111; - m10ex20p! margin: 10ex 20% !important; - -bdrs --webkit-border-radius:; -moz-border-radius:; border-radius:;
Emmet: Hotkeys - command + d <p>Lorem ipsum dolor sit
amet.</p> - command + b -webkit-transform: rotate(45deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg);
Emmet: Hotkeys - ctrl + w
<p>Hello world</p> div.article1>h1 <div class=“article1”> <h1> <p>Hello world</p> </h1> </div> Sale item1 Sale item2 Sale item3 Sale item4 Sale item5 div.navi>ul>li.a$$* <div class="navi"> <ul> <li class="a01">Sale item1</li> <li class="a02">Sale item2</li> <li class="a03">Sale item3</li> <li class="a04">Sale item4</li> <li class="a05">Sale item5</li> </ul> </div>
Emmet LiveStyle: Installation - http://livestyle.emmet.io (搜尋:emmet livestyle) - Package Control:
Install Packages livestyle - 安裝 Chrome擴充功能 在Chrome Web Store 搜尋:Emmet livestyle
Emmet LiveStyle: Demonstration https://www.youtube.com/watch?v=iQLhGbkupS4
Emmet LiveStyle: Key Function - Live and bi-directional CSS
style editing - Temporarily tweaking any websites - Simultaneously testing responsive web design - iOS Safari live preview - CSS Pre-processor support (SASS)
Discussion/Feedback