Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie 高雄前端社群 #3 SASS workshop
Ähnlich wie 高雄前端社群 #3 SASS workshop (20)
Mehr von 洧杰 廖
高雄前端社群 #3 SASS workshop
- 2. 社群創立緣起
- 4. 2013/3 RWD課程
- 5. #1 -如何逐步提升CSS的可模組化 #2 - 現代化網頁基礎排版技術
- 7. 共同交流，一塊成長
- 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窗口合作流程分享
- 10. 1. 為什麼網頁設計師需要SASS？ (50min) 2. SASS介紹(60min) 1. 王志誠 – CSS selector (10 min) 2. 以實務面切入SASS 語法教學 3. 工具分享(Sublime text 2、Compass、Fire.app) 3. 實際練習與操作(30min) 主題
- 13. 狂複製貼上相同class
- 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. .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. 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);
- 20. Live Demo
- 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. 傳統寫法 網站特性： 1. CSS碼共2500行 2. 四種文字樣式設定行數共98行 3. 這98行你只能靠印象一行一行去找出 來
- 24. 做完後你的客戶/老闆 和妳說..
- 29. 你太沒效率了！
- 30. 幹！
- 31. 但事情還是得解決 （哭哭）
- 32. SASS 變數 $font-small: 13px $font-middle: 16px $font-big:30px $link-color:blue $link-hover: black $line-height: 1.2
- 33. SASS 變數 $font-small: 13px .header .header h2 font-size: $font-small 300行 .content{..} .content h2 font-size: $font-small
- 34. Live Demo
- 35. 還好有了 SASS變數功能
- 36. 無法有效模組化，並 回收再利用
- 39. 傳統解決方案 .header h2, .content h2, .sidebar h2{..} 300行 .header {..} .header ul{..} 300行 .content{..} .content p{}
- 40. SASS extend %blue-h2 color: #blue background: #fff 300行 .header .header h2 @extend %blue-h2 300行 .content{..} .content h2 @extend %blue-h2
- 43. Inline-block IE hack .text-hide{ display: inline-block vertical-align: top zoom: 1 *display: inline }
- 44. SASS Mixin滿足一切 @mixin inline-block display: inline-block vertical-align: top zoom: 1 *display: inline h2 color: #000 @include inline-block
- 45. Live Demo
- 47. 總整理
- 48. SASS的優點 1. SASS變數與寫法可讓你一鍵修改所有CSS 數值，減輕修改與複製貼上的負擔。 2. SASS extend 可讓你集中網頁樣式，並提 升css可讀性、可維護性。 3. SASS Mixin製造自己的css知識庫 4. Sass搭上Compass = 神！
- 50. Take a break
- 54. Live Demo
- 56. 必須打指令新增專案
- 57. Compass.app
- 58. Fire.app
- 59. Fire.app高雄場 8/17
- 60. Sublime text 3
- 61. Sublime package control 1.Emmet (HTML、CSS利器) 2.SASS、SASS (支援高亮) 3.Goto-CSS-Declaration (追蹤CSS) 4.Emmet LiveStyle (自動更新)
- 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. 變數練習 改一個變數後全部都改 .news h1{ color:#fff} .news h2{ color:#fff} .news h3{ color:#fff}
- 68. extend練習 請試著將程式碼變短 .news h1{ Font-size:13px Border-bottom: 1px solid #000 Background: red } .news h2 {前兩行,background: yellow} .news h3 {前兩行,background: black}
- 69. mixin練習 如何引入mixin到.new？ @mixin text-hide() white-space: nowrap text-indent: 100% overflow: hidden .new background：url(../img/a.jpg)
- 71. mixin練習 .new的背景顏色？ @mixin box($a,$b) color: $a background: $b .new @include box(black,orange)
- 72. END
- 75. THANK YOU