Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

從CSS到SASS的開發旅程

3,269 views

Published on

公司內部技術分享-從CSS到SASS的開發旅程

Reference:

http://www.webcreatorbox.com/en/tutorials/css-sass/
http://blog.teamtreehouse.com/tale-front-end-sanity-beware-sass-import
http://www.slideshare.net/graemeblackwood/object-oriented-css-for-rapid-scalable-and-maintainable-development
http://sonspring.com/journal/sass-for-designers
http://www.slideshare.net/kurotanshi/compass-sass
http://frontenddesignconference.com/2012
http://www.douban.com/online/10309169/
http://history.n.yam.com/gamme/otaku/20130627/20130627580630.html
http://image.slidesharecdn.com/oocss-120423171310-phpapp01/95/slide-21-728.jpg?cb=1335428181
http://info.gift.hc360.com/2010/10/261455278849-3.shtml

從CSS到SASS的開發旅程

  1. 1. 從CSS到SASS的開發旅程 技術分享/多奇數位Anna
  2. 2. 簡介 用法 架構 案例
  3. 3. SASS簡介 SASS是什麼?
  4. 4. SASS簡介 CSS不好嗎? 圖片來源
  5. 5. SASS簡介 SASS 用來寫CSS的語言
  6. 6. SASS簡介 為什麼要學SASS?
  7. 7. SASS簡介 圖片來源 CSS不好嗎?
  8. 8. SASS簡介 沒有架構 較難維護 圖片來源
  9. 9. 圖片來源圖片來源
  10. 10. SASS簡介 SASS有很厲害嗎?
  11. 11. SASS簡介 圖片來源
  12. 12. SASS特性 • Variables 變數 • Nesting 巢狀 • Mixins 混合(function) • Inheritance 繼承
  13. 13. SASS簡介 • 重複使用 • 簡潔、易維護 (一個SASS檔案不超過200行 Nesting不超過3層)
  14. 14. SASS簡介 沒有架構 較難維護 圖片來源
  15. 15. SASS簡介 圖片來源1 圖片來源2
  16. 16. SASS簡介 誰要學SASS?
  17. 17. 圖片來源 圖片來源
  18. 18. SASS簡介 設計師→前端 圖片來源
  19. 19. SASS簡介 挑戰全端工程師
  20. 20. SASS用法 使用SASS,怎麼開始?
  21. 21. SASS用法 安裝與設定
  22. 22. SASS安裝 DEMO
  23. 23. SASS設定 config.rb設定 • 是否顯示註解 • 是否支援中文註解 • 絕對與相對路徑設定等
  24. 24. SASS用法 基本SASS(SCSS)怎麼寫?
  25. 25. SASS用法 SASS/SCSS和CSS的語法一樣, 只是寫法有些許差異。
  26. 26. SASS用法 SCSS SASS 寫法像原本的CSS 少了分號; 和大括號{} 寫法較為簡潔 冒號後注意要空白, 否則會出錯
  27. 27. SASS用法 CSS SCSS SASS body{ background-color:#ffffff; } body { background-color: #ffffff; } body background-color: #ffffff
  28. 28. SASS用法 轉換小工具 CSS SCSS SASS css2sass sasstoscss Sass to Css
  29. 29. SASS特性 • Variables 變數 • Nesting 巢狀 • Mixins 混合(function) • Inheritance 繼承
  30. 30. SASS用法- Variables • 支援數字、字串、布林、顏色、 空值 • 支援運算
  31. 31. SASS用法- Variables 1em+1em 1em-1em 1in+72pt 8px*5 22%5 2em 0em 2in 40px 2 Percentage(30/60) round(6.8) ceil(5.3) floor(5.8) abs(-66) 50% 7 6 5 66 Math Operators Number Functions 資料參考
  32. 32. SASS用法- Variables Percentage(30/60) round(6.8) ceil(5.3) floor(5.8) abs(-66) 百分比 四捨五入 無條件進入 無條件捨去 絕對值 Number Functions 資料參考 50% 7 6 5 66
  33. 33. SASS用法- Variables(基本) CSS SASS div { color: #1875e7; } $blue: #1875e7 div color: $blue
  34. 34. CSS SASS .box { border-left-radius: 5px; } $side: left .box border-#{$side}-radius: 5px SASS用法- Variables(字串)
  35. 35. CSS .title { left: 150px; right: 20%; } SASS $var: 2 .title left: 50px + 100px height: $var * 10% SASS用法- Variables(運算)
  36. 36. SASS用法- Variables DEMO
  37. 37. SASS用法- Nesting • 簡潔的巢狀架構 • 可讀性高
  38. 38. CSS div p { color: red; } SASS div p color: red SASS用法- Nesting
  39. 39. CSS ul { margin: 0; } ul li { padding-left: 10px; } ul li.top { padding-left: 0px; } SASS ul margin: 0 li padding-left: 10px &.top padding-left: 0px SASS用法- Nesting
  40. 40. SASS用法- Nesting DEMO
  41. 41. SASS用法- Mixins 將你的程式碼包裝起來, 並可代入參數重複使用。
  42. 42. CSS .box1 { width: 100%; height: 100%; } .box2 { width: 100%; height: 200px; } SASS =size($width, $height: $width) width: $width height: $height .box1 +size(100%) .box2 +size(100%, 200px) SASS用法- Mixins
  43. 43. SASS用法- Mixins DEMO
  44. 44. SASS用法- Mixins 別人幫你整理好的MIXINS
  45. 45. SASS用法- Extend/Inheritance 用來合併CSS樣式, 把相同的程式碼集中起來。
  46. 46. CSS .red-color, a, .error { color: red; } .error { font-weight: bold; } SASS .red-color color: red a @extend .red-color .error font-weight: bold @extend .red-color SASS用法- Inheritance
  47. 47. SASS用法- Inheritance DEMO
  48. 48. SASS組織 • 讓你的CSS模組化 • 不會產生額外的CSS檔案
  49. 49. SASS組織- @import DEMO
  50. 50. SASS使用心得 • 萬事起頭難 ( ´_ゝ`) • 樣式命名很重要! • 一開始的規劃很重要! • 建立完善的SASS架構, 就可以開開心心改需求,快快樂樂高效率!
  51. 51. 從CSS到SASS的開發旅程 THANKS

×