從CSS到SASS的開發旅程
22 likes3,357 views
本文介绍了从CSS到SASS的开发历程，强调SASS的优势如可维护性、简洁性和使用特性，例如变量、巢状、混合和继承。文中还涉及了SASS的基本语法、安装设置和代码组织，旨在帮助设计师和前端工程师更有效地使用SASS进行样式管理。整体内容展示了SASS相较于传统CSS的诸多好处，鼓励读者建立完善的SASS结构以提升工作效率。
從CSS到SASS的開發旅程
- 2. 簡介 用法 架構 案例
- 9. 圖片來源圖片來源
- 11. SASS簡介 圖片來源
- 12. SASS特性 • Variables 變數 • Nesting 巢狀 • Mixins 混合(function) • Inheritance 繼承
- 16. SASS簡介 誰要學SASS?
- 17. 圖片來源 圖片來源
- 19. SASS簡介 挑戰全端工程師
- 21. SASS用法 安裝與設定
- 22. SASS安裝 DEMO
- 23. SASS設定 config.rb設定 • 是否顯示註解 • 是否支援中文註解 • 絕對與相對路徑設定等
- 26. SASS用法 SCSS SASS 寫法像原本的CSS 少了分號; 和大括號{} 寫法較為簡潔 冒號後注意要空白， 否則會出錯
- 27. SASS用法 CSS SCSS SASS body{ background-color:#ffffff; } body { background-color: #ffffff; } body background-color: #ffffff
- 28. SASS用法 轉換小工具 CSS SCSS SASS css2sass sasstoscss Sass to Css
- 29. SASS特性 • Variables 變數 • Nesting 巢狀 • Mixins 混合(function) • Inheritance 繼承
- 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 資料參考
- 33. SASS用法- Variables(基本) CSS SASS div { color: #1875e7; } $blue: #1875e7 div color: $blue
- 34. CSS SASS .box { border-left-radius: 5px; } $side: left .box border-#{$side}-radius: 5px SASS用法- Variables(字串)
- 35. CSS .title { left: 150px; right: 20%; } SASS $var: 2 .title left: 50px + 100px height: $var * 10% SASS用法- Variables(運算)
- 37. SASS用法- Nesting • 簡潔的巢狀架構 • 可讀性高
- 38. CSS div p { color: red; } SASS div p color: red SASS用法- Nesting
- 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
- 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
- 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
- 50. SASS使用心得 • 萬事起頭難 ( ´_ゝ`) • 樣式命名很重要！ • 一開始的規劃很重要！ • 建立完善的SASS架構， 就可以開開心心改需求，快快樂樂高效率！