公司內部技術分享-從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

1. 從CSS到SASS的開發旅程
技術分享/多奇數位Anna

2. 簡介 用法 架構 案例

3. SASS簡介
SASS是什麼?

4. SASS簡介
CSS不好嗎?
圖片來源

5. SASS簡介
SASS
用來寫CSS的語言

6. SASS簡介
為什麼要學SASS?

7. SASS簡介
圖片來源
CSS不好嗎?

8. SASS簡介
沒有架構
較難維護
圖片來源

9. 圖片來源圖片來源

10. SASS簡介
SASS有很厲害嗎?

11. SASS簡介
圖片來源

12. SASS特性
• Variables 變數
• Nesting 巢狀
• Mixins 混合(function)
• Inheritance 繼承

13. SASS簡介
• 重複使用
• 簡潔、易維護
(一個SASS檔案不超過200行
Nesting不超過3層)

14. SASS簡介
沒有架構
較難維護
圖片來源

15. SASS簡介
圖片來源1 圖片來源2

16. SASS簡介
誰要學SASS?

17. 圖片來源
圖片來源

18. SASS簡介
設計師→前端
圖片來源

19. SASS簡介
挑戰全端工程師

20. SASS用法
使用SASS，怎麼開始?

21. SASS用法
安裝與設定

22. SASS安裝
DEMO

23. SASS設定
config.rb設定
• 是否顯示註解
• 是否支援中文註解
• 絕對與相對路徑設定等

24. SASS用法
基本SASS(SCSS)怎麼寫?

25. SASS用法
SASS/SCSS和CSS的語法一樣，
只是寫法有些許差異。

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 繼承

30. SASS用法- Variables
• 支援數字、字串、布林、顏色、
空值
• 支援運算

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. SASS用法- Variables
Percentage(30/60)
round(6.8)
ceil(5.3)
floor(5.8)
abs(-66)
百分比
四捨五入
無條件進入
無條件捨去
絕對值
Number Functions
資料參考
50%
7
6
5
66

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(運算)

36. SASS用法- Variables
DEMO

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

40. SASS用法- Nesting
DEMO

41. SASS用法- Mixins
將你的程式碼包裝起來，
並可代入參數重複使用。

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. SASS用法- Mixins
DEMO

44. SASS用法- Mixins
別人幫你整理好的MIXINS

45. SASS用法- Extend/Inheritance
用來合併CSS樣式，
把相同的程式碼集中起來。

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. SASS用法- Inheritance
DEMO

48. SASS組織
• 讓你的CSS模組化
• 不會產生額外的CSS檔案

49. SASS組織- @import
DEMO

50. SASS使用心得
• 萬事起頭難 ( ´_ゝ`)
• 樣式命名很重要！
• 一開始的規劃很重要！
• 建立完善的SASS架構，
就可以開開心心改需求，快快樂樂高效率！

51. 從CSS到SASS的開發旅程
THANKS