淺談 SASS ＆ Maintainable CSS

介紹 SASS 規則以及可維護性的 CSS

Transcript

1. 淺談 SASS & Maintainable CSS !1
2. ‣ 畢業實踐⼤大學 ‣ 曾任職 優仕網/愛逛街 ‣ 2013/05/27 加⼊入 GSS ‣ KWPI_ID ‣ Web/UI Designer Evan Wu !2
3. ‣ What is sass? ‣ Why use? ‣ Who is suitable for use SASS(Syntactically Awesome StyleSheets) !3
4. ‣ SASS 是⼀一種 CSS 開發⼯工具。
 有兩種編譯的格式： • SASS • SCSS (Sassy CSS) ‣ 可以使⽤用 Variables, Nesting, Mixins, Extend/ Inheritance…等。 ‣ 維護⽅方便，程式代碼更好閱讀。 ‣ 完全兼容 CSS3。 What is SASS !4
5. ‣ 官⽅方舊的語法。 減少了初始跟結尾的⼤大括號，不⽀支援 CSS 的寫法，不能共同存在。 ! ! SASS $brand-primary: #006AEB $margin: 20px .header margin: $margin padding: 0 background: darken($brand-primary, 10%) .btn-primary margin: $margin/2 padding: 0 background: darken($brand-primary, 10%) !5
6. ‣ CSS 的擴展寫法。 有 CSS 基礎的設計師，學習就會很快。 ! ! SCSS $brand-primary: #006AEB; $margin: 20px; .header { margin: $margin; padding: 0; background: darken($brand-primary, 10%); } .btn-primary { margin: $margin / 2; padding: 0; background: darken($brand-primary, 10%); } !6
7. 註解 /* ** 我是 CSS 標準註解 ** ^ header */ .header { margin: 0 0 20px 0; } ! // 我是 SASS 的單⾏行註解 // Typography // -------------------- $fontS: 15px; $line-height: 1.5; // 15/22.5~ ‣ SASS 有兩種註解⽅方式。 • ⼀一種是標準的 CSS 註解⽅方式 /* */ • 另⼀一種是單⾏行的註解⽅方式 //，編譯後不會出現在 CSS 之中。 !7
8. Variables 變數 $brand-primary: #006AEB; $font-size: 15px; $margin: 16px; ! .header { margin: $margin; background: darken($brand-primary, 10%); font-size: $font-size; } ! .header { margin: 16px; background: #0053b8; font-size: 15px; } ‣ 可以宣告變數，並在整份⽂文件中使⽤用。 • 以 $ 為開頭，緊接變數名稱。 !8
9. Variables 變數 $margin: 16px; $border-direction: top; ! .btn-primary { margin: $margin / 2; padding: 0; border-#{$border-direction}: 1px solid #ccc; } .btn-primary { margin: 8px; padding: 0; border-top: 1px solid #ccc; } ‣ #{$variables} !9
10. Variables 變數 //第⼀一個值為預設值，第⼆二個⿏鼠標滑過值 $linkColor: #08c #333; ! a { color: nth($linkColor,1); &:hover { color: nth($linkColor,2); } } a { color: #08c; } ! a:hover { color: #333; } ! ‣ nth($variables,index) !10
11. Nesting 巢狀 .list { margin: 0; padding: 0; li { list-style: none; } .btn { color: #666; &:hover { color: #333; } } } ! .list { margin: 0; padding: 0; } .list li { list-style: none; } .list .btn { color: #666; } .list .btn:hover { color: #333; } ! ‣ 巢狀結構分成: • 元素選擇器，可以⽤用 & 表⽰示⽗父元素 • 樣式選擇器 !11
12. Nesting 巢狀 // 樣式選擇器 ! .border { border { style: solid; left { width: 3px; color: #666; } } } ! .border { border-style: solid; border-left-width: 3px; border-left-color: #666; } ! !12
13. Mixins 混合 @mixin border ($width, $color) { border-width: $width; border-color: $color; } ! .pic { @include border(3px, #fff); } .pic { border-width: 3px; border-color: #fff; } ! ‣ Mixin 可以單獨定義⼀一個組合設定，提供選擇器 重複使⽤用。 • 使⽤用時以 @mixin 開頭，緊接 mixin 命名。 • 多個參數的時候，可⽤用逗號分開。 • ⼀一個屬性有多個值的話，參數就可以⽤用變數加... EX:$variables… !13
14. Mixins 混合 // 屬性內容有多個值 // 例如 box-shadow, transition…等 // 變數名稱後可加...表⽰示 ! @mixin box-shadow ($shadow…) { -webkit-box-shadow: $shadow; -moz-box-shadow: $shadow; box-shadow: $shadow; } ! .pic { @include box-shadow (0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.2)); } .pic { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.2); ! -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.2); ! box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.2); } ! !14
15. Extend 繼承 h1 { border: 4px solid #ff9aa9; } ! .speaker { @extend h1; border-width: 2px; } h1, .speaker { border: 4px solid #ff9aa9; } ! .speaker { border-width: 2px; } ‣ Extend 可以讓選擇器，繼承另⼀一個選擇器所有的 樣式。 • 使⽤用時以 @extand 開頭，後⾯面緊接繼承的選擇器。 • sass 3.2.0 之後可以定義 placeholder。其有優點在於不 會產⽣生多於的 CSS。 !15
16. Extend 繼承 // placeholder // 可以避免定義過多的基礎樣式，最後 compile 出來 // 有過多不需要的 class。 ! %float-r { float: right; } %float-l { float: left; } .logo { @extend float-l; width: 120px; background: url(../img/gss.png); } .sublogo { @extend float-l; width: 60px; background: url(../img/gss_cloud.png); } .logo, .sublogo { float: left; } ! .logo { width: 120px; background: url(../img/gss.png); } ! .sublogo { width: 60px; background: url(../img/gss_cloud… } float-r & float-l 不會出現 !16
17. Operators 運算式 $brand-primary: #006AEB; $font-size: 15px; $font-large: ceil($font-size * 1.15); // 18~ $font-small: ceil($font-size * 0.86); // 13~ $line-height: 1.5; // 15/22.5~ $margin: 16px; ! .title { margin: $margin / 2; width: 14px * 5; font-size: $font-size * 2; } .title { margin: 8px; width: 70px; font-size: 30px; } ‣ SASS 具有運算的特性，可做加減乘除運算。 • 可以對數值性的變數(例:數字, 顏⾊色, 變數)，進⾏行運算。 • 請在運算符前後空⼀一格，不然會出錯。 !17
18. Operators 運算式 // 補充說明 // round($value) 四捨五⼊入 // ceil($value) 無條件進位 // floor($value) 無條件去除⼩小數點 ! .contant-title { margin: $margin * 2; width: 970px - 14 * 8; font-size: ceil($font-size + #font-small / 2); color: $brand-primary + $brand-primary; } ! .contant-article { color: #0055aa + #fa33bc; background: #0055aa * 2; } .contant-title { margin: 32px; width: 858px; font-size: 22px; color: #00d4ff; } ! .contant-article { color: #fa88ff; background: #00aaff; } !18
19. Function 函數 $themecolor: #006aeb; $link-color: #0066aa; ! .header { background: lighten($themecolor, 50); } .sider { background: darken($themecolor, 10); } a { color: $link-color; &:hover { color: darken($link-color, 20); } } .header { background: #ebf4ff; } .sider { background: #0053b8; } a { color: #0066aa; &:hover { color: #002944; } } ‣ SASS 定義很多函數可以使⽤用。 • 最常⽤用就是顏⾊色的 funtion，darken, lighten…。 !19
20. Function 函數 $base-color: #F06060 lighten($base-color, 15) darken($base-color, 10) saturate($base-color, 17) desaturate($base-color, 30) adjust_hue($base-color, 220) grayscale($base-color) invert($base-color) !20
21. Function 函數 $base-color: #d97a07 lighten($base-color, 15) darken($base-color, 10) saturate($base-color, 17) desaturate($base-color, 30) adjust_hue($base-color, 220) grayscale($base-color) invert($base-color) !21
22. Partial // 如果外部有⼀一個 _btn.scss // ⽤用 import 導⼊入 ! @import “btn” ! .list { margin: 0; padding: 0; } ! ‣ 可以導⼊入 scss，⼜又不會被 compile 成 CSS 檔案。 • 在檔案⾯面前加底線，例：_btn.scss。 • 同⼀一個路徑下，不可以有 partial 與⾮非 partial，例： _btn.scss & btn.scss !22
23. Partial !23
24. ‣ CSS 並不能做到變數跟運算，SASS 可以！ ‣ 寫的好！就可以⼤大幅減少編寫 code 的時間。 ‣ 可以讓程式碼更好閱讀，如：巢狀的寫法。 ‣ 良好的維護性。 Why use? !24
25. ‣ 會寫 CSS 的設計師，以及⼯工程師。 ‣ 想要更快速的完成專案開發的開發者。 ‣ 更適合懶得打⼜又臭⼜又⻑⾧長的 css 的開發者 (原來 code 可以那麼短！) Who is suitable for use? !25
26. 參考資源 ‣ SASS 官網。 ‣ The sass way ‣ sass 官⽅方⽂文件中⽂文版 ‣ sassmeister 最佳線上練習 ‣ sassme color funtion 參考 !26
27. Compass ‣ Compass is SASS framework ‣ 有⼤大量的 CSS Mixins 可以使⽤用 ‣ 有良好的擴充性 ‣ ⽀支援 CSS3 !27
28. // 最快速的⽅方式就是直接 import ! @import “compass”; ! .header { … } ! // 也可以個別單獨 import 需要的部份 ! @import “compass/css3” ! .box-shadow { … } @import ‣ 在⽂文件的最開頭 import !28
29. .box { background-image: -moz-linear-gradient(left top, #ffffff, #dddddd); background-image: -o-linear-gradient(left top, #ffffff, #dddddd); background-image: -webkit-linear-gradient(left top, #ffffff, #dddddd); background-image: linear-gradient(to right bottom, #ffffff, #dddddd); -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; ! -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } CSS3 前綴詞又臭又長 !29
30. .box { @include background-image(linear-gradient(left top, white, #dddddd)); @include border-radius(25px); @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.5)); } 傑克 真是太神奇了！ 搞 定 收 工 ！ !30
31. !31
32. SASS 好工具 !32
33. ‣ BEM ‣ OOCSS ‣ SMACSS Maintainable CSS !33
34. BEM ‣ Block, Element, Modifier ‣ 觀念跟 oop 最相似 ‣ 注重 Block 的獨⽴立性 ‣ yandex 是⽤用 BEM 建構的 !34
35. .person {} .person__hand {} .person—female {} .person—female__hand {} .person__hand—left {} — 跟 __ ‣ Nicolas Gallagher 改進版。 • .block 代表某個較為⾼高階或較為抽象的樣式定義 • .block__element 代表是套⽤用在 .block 下的⼀一個⼦子元素 • .block--modifier 代表 .block 在不同狀態下的樣式 !35
36. OOCSS(Object-oriented CSS ) ‣ 物件導向 CSS (OOP的概念) ‣ 注重 CSS 重⽤用的⼀一種規則 ‣ 減少對 HTML 結構的依賴 (like .title h1 a {…}) ‣ 避免使⽤用 ID ‣ ⾮非必要情況下，不要使⽤用 !important ‣ 使⽤用語義來定義 class name !36
37. OOCSS(Object-oriented CSS ) ‣ 兩⼤大原則： • Separation of structure from skin (把結構跟樣式分開) • Separation of containers and content (把內容跟容器分開) !37
38. ‣ 每個網⾴頁中的樣式都可以被重複使⽤用，例如網站中 的視覺顏⾊色，還有其他結構，都可以重複使⽤用。 // 未使⽤用 OOCSS 之前 #button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #box { width: 400px; overflow: hidden; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } #widget { width: 500px; min-height: 200px; overflow: auto; border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } 把結構跟樣式分開 !38
39. .button { width: 200px; height: 50px; } ! .box { width: 400px; overflow: hidden; } .widget { width: 500px; min-height: 200px; overflow: auto; } ! .skin { border: solid 1px #ccc; background: linear-gradient(#ccc, #222); box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px; } ‣ 將所有通⽤用的樣式，全部整合到 skin 上。接著只要 將 skin 的 class name 加到所需要的地⽅方，這樣可 以產⽣生與之前⼀一樣的效果。 把結構跟樣式分開 !39
40. #sidebar h3 { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; } #sidebar h3, #footer h3 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; } #footer h3 { font-size: 1.5em; text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px; } 把內容跟容器分開 !40
41. #sidebar h3 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; } ! /* other styles here.... */ ! #footer h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px; } 或許會更糟... !41
42. .main-title { font-family: Arial, Helvetica, sans-serif; font-size: 2em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; } .explain { font-size: 1.5em; text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px; } 也許可以這樣寫 <div id="sider"> <h3 class=“main-title”>…</h3> </div> . . . <div id="footer"> <h3 class=“main-title explain“>… </h3> </div> !42
43. OOCSS 優點 ‣ 減少 CSS 的程式碼。 ‣ 有整潔的 HTML，有語意 class name，邏輯強的層 次關係。 ‣ 更好的網⾴頁優化，加快網⾴頁速度。 ‣ 良好的擴充性，可以擴充其他組件的 CSS 樣式。 !43
44. OOCSS 缺點 ‣ 適⽤用於⼤大型專案開發。 ‣ 沒有規律的使⽤用，會創造出很多不需要的 CSS ， 造成維護的不易。 ‣ 最好為每個 CSS 組件，寫⼀一份說明⽂文件，有助於 維護跟使⽤用。 !44
45. SMACSS (Scalable and Modular Architecture for CSS) ‣ Base ‣ Layout ‣ Module ‣ State ‣ Theme !45
46. ‣ reset, Normalize…等 ‣ 基本設定
 html, body, form { margin: 0; padding: 0; }
 input[type=text] { border: 1px solid #999; }
 a { color: #039; }
 a:hover { color: #03C; } Base !46
47. ‣ 網站的布局。 ‣ (header, article, footer..等)。 ‣ 命名前綴詞：.l-ooo。 Layout !47
48. ‣ 可以重複的視覺樣式，具有擴展性。 ‣ 避免元素的過多繼承。 ‣ 以三個字⺟母，做命名開頭，如 .pod, .mod… Module #sidebar .pod input[type=text] { width: 100%; } .pod-sider input[type=text] { width: 100%; } !48
49. ‣ 負責定義元素不同的狀態下，所呈現的樣式。 ‣ (訊息狀態, 按鈕狀態...等) ‣ 允許使⽤用 !important State .tab { background-color: purple; color: white; } ! .active { background-color: white; color: black; } .tab { background-color: purple; color: white; } ! .is-tab-active { background-color: white; color: black; } !49
50. ‣ 網⾴頁上主要視覺定義，例如 border-color, background-image 或是 font-family 等相關的 Typography 設定。 Theme !50
51. ‣ 減少 CSS 命名的深度 Minimizing the Depth #sidebar div, #footer div { border: 1px solid #333; } ! #sidebar div h3, #footer div h3 { margin-top: 5px; } ! #sidebar div ul, #footer div ul { margin-bottom: 5px; } .pod { border: 1px solid #333; } ! .pod > h3 { margin-top: 5px; } ! .pod > ul { margin-bottom: 5px; } !51
52. .pod { border: 1px solid #333; } ! .pod > h3 { margin-top: 5px; } ! .pod > ul { margin-bottom: 5px; } !52