Your SlideShare is downloading. ×
Web design using compass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Web design using compass

129
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
129
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Design Web Using 13年7月4⽇日星期四
  • 2. Design Web Using Compass 13年7月4⽇日星期四
  • 3. @kmsheng 哭哭..快變兩個⼝口秋的體重啦.. https://www.facebook.com/kuanmin.sheng.1 13年7月4⽇日星期四
  • 4. Dude ! You got a problem ! 13年7月4⽇日星期四
  • 5. 13年7月4⽇日星期四
  • 6. 14 Rules for Faster Loading Web Sites by Steve Souders 13年7月4⽇日星期四
  • 7. Rule #1 13年7月4⽇日星期四
  • 8. Make Fewer HTTP Requests 13年7月4⽇日星期四
  • 9. 13年7月4⽇日星期四
  • 10. ⼿手刻的浪漫很好 但是... 13年7月4⽇日星期四
  • 11. 還有更好的做法 13年7月4⽇日星期四
  • 12. 13年7月4⽇日星期四
  • 13. 為什麼你應該使⽤用 compass ? 13年7月4⽇日星期四
  • 14. 避免單⼀一檔案⾏行數過多 好管理 13年7月4⽇日星期四
  • 15. 更具模組化 modular 13年7月4⽇日星期四
  • 16. 重複使⽤用 ie hacks & animation 13年7月4⽇日星期四
  • 17. 合併CSS 最好能在符合 IE max selectors 的情況下減少 stylesheets 數量 13年7月4⽇日星期四
  • 18. Vendor Prefixes compass 幫你加 13年7月4⽇日星期四
  • 19. Compass CSS3 @import “compass/css3”; .simple { @include border-radius(8px, 4px); } 13年7月4⽇日星期四
  • 20. Compass CSS3 Result .simple { -webkit-border-radius: 8px 4px; -moz-border-radius: 8px 4px; -khtml-border-radius: 8px 4px; border-radius: 8px 4px; } 13年7月4⽇日星期四
  • 21. Compass Creates Image Sprites 13年7月4⽇日星期四
  • 22. Compass Uses Sass 13年7月4⽇日星期四
  • 23. 煞死能幹嘛? 可以吃嗎? 13年7月4⽇日星期四
  • 24. 巢狀撰寫 Nesting 13年7月4⽇日星期四
  • 25. Nesting .toolbar { .btn { display: inline-block; padding: 4px 12px; &:hover { background-color: $blue; } } } 13年7月4⽇日星期四
  • 26. 變數 Variables 13年7月4⽇日星期四
  • 27. Variables 13年7月4⽇日星期四
  • 28. !default only assign when it doesn’t have a value yet 13年7月4⽇日星期四
  • 29. 函式 Mixins 13年7月4⽇日星期四
  • 30. Mixins // Center-align a block // level element @mixin center-block() { display: block; margin-left: auto; margin-right: auto; } 13年7月4⽇日星期四
  • 31. Mixins // tricking the GPU to think // that an element is 3D @mixin fade($duration) { transition: $duration; transform: translateZ(0); opacity: 0.25; } 13年7月4⽇日星期四
  • 32. ⽤用別⼈人寫好的 mixins 才是⺩王道啊 keyword: sass animation mixin 13年7月4⽇日星期四
  • 33. 繼承 Selector Inheritance 13年7月4⽇日星期四
  • 34. Selector inheritance .btn { padding: 4px 12px; } .btn-delete { @extend .btn; background-color: $red; } 13年7月4⽇日星期四
  • 35. 運算⼦子 Math 13年7月4⽇日星期四
  • 36. Math $baseFontSize: 14px !default; $fontSizeLarge: $baseFontSize * 1.25 ! default; 13年7月4⽇日星期四
  • 37. 13年7月4⽇日星期四
  • 38. Compass Reports Syntax Errors 13年7月4⽇日星期四
  • 39. 13年7月4⽇日星期四
  • 40. new-navigation.scss navbar.scss jumbotron.scss tab-list.scss login.scss events.scss goods.scss logo.scss 13年7月4⽇日星期四
  • 41. 或許你要問.. 13年7月4⽇日星期四
  • 42. 阿~舊的css怎麼辦? 13年7月4⽇日星期四
  • 43. sass-convert sass-convert -R my_css_dir --from css --to scss 13年7月4⽇日星期四
  • 44. 重構 refactor 13年7月4⽇日星期四
  • 45. grunt-contrib-compass 13年7月4⽇日星期四
  • 46. css不⽤用再被git trace囉.. deploy 前 grunt 幫你 build 出來 13年7月4⽇日星期四
  • 47. 在win7怎麼裝compass? 如果你真的要⽤用 windows Orz.. 13年7月4⽇日星期四
  • 48. 要換compass⼀一定 要先裝ruby 13年7月4⽇日星期四
  • 49. 在win7怎麼裝compass? 如果你真的要⽤用 windows Orz.. here 13年7月4⽇日星期四
  • 50. exe 檔裝好之後 打開 “Start Command Prompt with Ruby” 13年7月4⽇日星期四
  • 51. gem install sass gem install compass 13年7月4⽇日星期四
  • 52. 在要 watch ⺫⽬目錄新增 config、css、sass、 img 資料夾 13年7月4⽇日星期四
  • 53. // config 資料夾裡新增 compass.rb 內容如下 http_path = “/” css_dir = “css” cass_dir = “sass” images_dir = “img” 13年7月4⽇日星期四
  • 54. 裝好之後就可以下 compass watch 開始寫 sass 囉 13年7月4⽇日星期四
  • 55. ng-animate 其實就是 CSS3 .. http://www.nganimate.org 13年7月4⽇日星期四
  • 56. 13年7月4⽇日星期四
  • 57. 13年7月4⽇日星期四
  • 58. Q & A 13年7月4⽇日星期四