Successfully reported this slideshow.

高雄前端社群 #3 SASS workshop

2,785 views

Published on

Published in: Technology
  • Be the first to comment

高雄前端社群 #3 SASS workshop

  1. 1. SASS WORKSHOP 講者:廖洧杰(三木) 高雄前端社群#3
  2. 2. 社群創立緣起
  3. 3. 在高雄 沒有管道交流..Orz
  4. 4. 2013/3 RWD課程
  5. 5. #1 -如何逐步提升CSS的可模組化 #2 - 現代化網頁基礎排版技術
  6. 6. 讓南部的網頁設計師 有一個交流的場所與 管道
  7. 7. 共同交流,一塊成長
  8. 8. 之後還有很多議程 1. RWD 進階經驗分享 2. RWD Workshop 3. Sublime text 3 Workshop 4. 如何透過jQuery撰寫動畫效果。 5. Sass framwork (Susy、bootstrap) 6. Angular.js 7. CSS之OOCSS、SMACSS設計模式 8. CSS3 animation 9. web窗口合作流程分享
  9. 9. SASS Workshop
  10. 10. 1. 為什麼網頁設計師需要SASS? (50min) 2. SASS介紹(60min) 1. 王志誠 – CSS selector (10 min) 2. 以實務面切入SASS 語法教學 3. 工具分享(Sublime text 2、Compass、Fire.app) 3. 實際練習與操作(30min) 主題
  11. 11. 為什麼網頁設計師需 要學SASS?
  12. 12. 目前的CSS在設計上 容易遭受到一些瓶頸
  13. 13. 狂複製貼上相同class
  14. 14. .Box{..} 寫CSS時狂複製貼上
  15. 15. .Box{..} 寫CSS時狂複製貼上 .Box{..} .Box{..} .Box{..} .Box{..} .Box{..} .Box{..} .Box{..} .Box{..} 寫CSS時狂複製貼上
  16. 16. .Box h1{..} .Box ul {..} .Box li {..} .Box li a {..} .Box li a i {..} .Box li a em {..} .Box span {..} .Box .box_inside {..} 寫CSS時狂複製貼上
  17. 17. .new-box h1{..} .new-box ul {..} .new-box li {..} .Box li a {..} .Box li a i {..} .Box li a em {..} .Box span {..} .Box .box_inside {..} 模組化也很不方便
  18. 18. CSS3前綴詞改一個設定,同時要改多個 -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px; background: #EEFF99; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33)); background: -webkit-linear-gradient(#EEFF99, #66EE33); background: -moz-linear-gradient(#EEFF99, #66EE33); background: -ms-linear-gradient(#EEFF99, #66EE33); background: -o-linear-gradient(#EEFF99, #66EE33); background: linear-gradient(#EEFF99, #66EE33);
  19. 19. http://sonspring.com/journal/sass-for-designers
  20. 20. Live Demo
  21. 21. CSS設定 共通文字大小共4組樣式
  22. 22. 傳統寫法 .content p{ font-size:13px } 300行 .footer span{font-size:13px } 300行 .sidebar h2{font-size:15px } 300行 .news a{font-size:25px }
  23. 23. 傳統寫法 網站特性: 1. CSS碼共2500行 2. 四種文字樣式設定行數共98行 3. 這98行你只能靠印象一行一行去找出 來
  24. 24. 做完後你的客戶/老闆 和妳說..
  25. 25. A字形改12px B字形改16px C字形再大一點 D字形改小一點 除了字形還有顏色、 線條粗一點巴拉巴拉~ 老闆
  26. 26. 一小時後我要開記 者會,所以快點改 好! 老闆
  27. 27. 沒辦法那麼快好, 起碼要2~3個小時。 心裡OS:(嘎拎杯動做 小叮噹..) 網頁設計師
  28. 28. 什麼!只是改『一點 點東西』也需要那麼 久時間! 老闆
  29. 29. 你太沒效率了!
  30. 30. 幹!
  31. 31. 但事情還是得解決 (哭哭)
  32. 32. SASS 變數 $font-small: 13px $font-middle: 16px $font-big:30px $link-color:blue $link-hover: black $line-height: 1.2
  33. 33. SASS 變數 $font-small: 13px .header .header h2 font-size: $font-small 300行 .content{..} .content h2 font-size: $font-small
  34. 34. Live Demo
  35. 35. 還好有了 SASS變數功能
  36. 36. 無法有效模組化,並 回收再利用
  37. 37. CSS設定 一個網站共有三處h2樣式是一樣的
  38. 38. 不好的寫法 .header h2{..} .. 300行 .. .content h2{..} .. 300行 .. .sidebar h2{..}
  39. 39. 傳統解決方案 .header h2, .content h2, .sidebar h2{..} 300行 .header {..} .header ul{..} 300行 .content{..} .content p{}
  40. 40. SASS extend %blue-h2 color: #blue background: #fff 300行 .header .header h2 @extend %blue-h2 300行 .content{..} .content h2 @extend %blue-h2
  41. 41. 太多CSS hack要記, 久了就忘得七七八八
  42. 42. 圖片取代文字 .text-hide{ white-space: nowrap; text-indent: 100%; overflow: hidden ; }
  43. 43. Inline-block IE hack .text-hide{ display: inline-block vertical-align: top zoom: 1 *display: inline }
  44. 44. SASS Mixin滿足一切 @mixin inline-block display: inline-block vertical-align: top zoom: 1 *display: inline h2 color: #000 @include inline-block
  45. 45. Live Demo
  46. 46. SASS能夠製造出自己 的CSS內隱知識庫
  47. 47. 總整理
  48. 48. SASS的優點 1. SASS變數與寫法可讓你一鍵修改所有CSS 數值,減輕修改與複製貼上的負擔。 2. SASS extend 可讓你集中網頁樣式,並提 升css可讀性、可維護性。 3. SASS Mixin製造自己的css知識庫 4. Sass搭上Compass = 神!
  49. 49. http://codepen.io/pen/
  50. 50. Take a break
  51. 51. Compass 支援SASS的工具
  52. 52. http://sonspring.com/journal/sass-for-designers
  53. 53. Compass部分功能 1.Image-url 2.image-height 3.image-width 4.CSS3 Mixins 5.CSS Sprites
  54. 54. Live Demo
  55. 55. 在以前導入 SASS+Compass 會有什麼瓶頸?
  56. 56. 必須打指令新增專案
  57. 57. Compass.app
  58. 58. Fire.app
  59. 59. Fire.app高雄場 8/17
  60. 60. Sublime text 3
  61. 61. Sublime package control 1.Emmet (HTML、CSS利器) 2.SASS、SASS (支援高亮) 3.Goto-CSS-Declaration (追蹤CSS) 4.Emmet LiveStyle (自動更新)
  62. 62. 個人Sass常用熱鍵 1.Ctrl+Enter、Ctrl+Shift+Enter (跳到下一行、跳到上一行) 2.Ctrl+L、Ctrl+[、Ctrl+] (一行行選起來後向內外縮排) 3.Ctrl+D (同時修改) 4.Ctrl+P、Ctrl+R (尋找檔名與程式碼)
  63. 63. 實務經驗分享 Grid System
  64. 64. 實務經驗分享 無痛轉移現有CSS專案
  65. 65. 實務經驗分享 如何自製常用mixin
  66. 66. 練習 .news p{ font-size:13px } .news h2{ font-size:13px } .news h2 a{ font-size:13px } .news h2 a:hover{ font-size:13px }
  67. 67. 變數練習 改一個變數後全部都改 .news h1{ color:#fff} .news h2{ color:#fff} .news h3{ color:#fff}
  68. 68. extend練習 請試著將程式碼變短 .news h1{ Font-size:13px Border-bottom: 1px solid #000 Background: red } .news h2 {前兩行,background: yellow} .news h3 {前兩行,background: black}
  69. 69. mixin練習 如何引入mixin到.new? @mixin text-hide() white-space: nowrap text-indent: 100% overflow: hidden .new background:url(../img/a.jpg)
  70. 70. 變數加總 .one的字型大小是多少? $font-size: 12px .one font-size: $font-size +3px
  71. 71. mixin練習 .new的背景顏色? @mixin box($a,$b) color: $a background: $b .new @include box(black,orange)
  72. 72. END
  73. 73. 台灣哪裡有機會看到大家 共同練習同一個網頁版型?
  74. 74. THANK YOU

×