Web design using compass

217 views
171 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
217
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web design using compass

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

×