Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[0503] 使用Sublime Text編輯HTML/CSS: Emmet + LiveStyle

[0503] 使用Sublime Text編輯HTML/CSS: Emmet + LiveStyle

Avatar for F2E桃園

F2E桃園

May 03, 2014
Tweet

More Decks by F2E桃園

Other Decks in Programming

Transcript

  1. 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…)
  2. 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')
  3. Emmet Installation - Sublime Text 2 > 
 Preference >


    Package Control >
 Package Control: Install Packages - Emmet
 
 
 
 

  4. 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/
  5. 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:;
  6. 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);
  7. 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>
  8. Emmet LiveStyle: Installation - http://livestyle.emmet.io (搜尋:emmet livestyle) - Package Control:

    Install Packages
 livestyle - 安裝 Chrome擴充功能
 在Chrome Web Store 搜尋:Emmet livestyle
  9. 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)