Upgrade to Pro — share decks privately, control downloads, hide ads and more …

淺談 SASS & Maintainable CSS

Evan Wu
November 11, 2013

淺談 SASS & Maintainable CSS

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

Evan Wu

November 11, 2013
Tweet

More Decks by Evan Wu

Other Decks in Design

Transcript

  1. ‣ What is sass? ‣ Why use? ‣ Who is

    suitable for use SASS(Syntactically Awesome StyleSheets) !3
  2. ‣ SASS 是⼀一種 CSS 開發⼯工具。
 有兩種編譯的格式: • SASS • SCSS

    (Sassy CSS) ‣ 可以使⽤用 Variables, Nesting, Mixins, Extend/ Inheritance…等。 ‣ 維護⽅方便,程式代碼更好閱讀。 ‣ 完全兼容 CSS3。 What is SASS !4
  3. ‣ 官⽅方舊的語法。 減少了初始跟結尾的⼤大括號,不⽀支援 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
  4. ‣ 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
  5. 註解 /* ** 我是 CSS 標準註解 ** ^ header */

    .header { margin: 0 0 20px 0; } ! // 我是 SASS 的單⾏行註解 // Typography // -------------------- $fontS: 15px; $line-height: 1.5; // 15/22.5~ ‣ SASS 有兩種註解⽅方式。 • ⼀一種是標準的 CSS 註解⽅方式 /* */ • 另⼀一種是單⾏行的註解⽅方式 //,編譯後不會出現在 CSS 之中。 !7
  6. 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
  7. 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
  8. 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
  9. 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
  10. Nesting 巢狀 // 樣式選擇器 ! .border { border { style:

    solid; left { width: 3px; color: #666; } } } ! .border { border-style: solid; border-left-width: 3px; border-left-color: #666; } ! !12
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. Partial // 如果外部有⼀一個 _btn.scss // ⽤用 import 導⼊入 ! @import

    “btn” ! .list { margin: 0; padding: 0; } ! ‣ 可以導⼊入 scss,⼜又不會被 compile 成 CSS 檔案。 • 在檔案⾯面前加底線,例:_btn.scss。 • 同⼀一個路徑下,不可以有 partial 與⾮非 partial,例: _btn.scss & btn.scss !22
  21. 參考資源 ‣ SASS 官網。 ‣ The sass way ‣ sass

    官⽅方⽂文件中⽂文版 ‣ sassmeister 最佳線上練習 ‣ sassme color funtion 參考 !26
  22. Compass ‣ Compass is SASS framework ‣ 有⼤大量的 CSS Mixins

    可以使⽤用 ‣ 有良好的擴充性 ‣ ⽀支援 CSS3 !27
  23. // 最快速的⽅方式就是直接 import ! @import “compass”; ! .header { …

    } ! // 也可以個別單獨 import 需要的部份 ! @import “compass/css3” ! .box-shadow { … } @import ‣ 在⽂文件的最開頭 import !28
  24. .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
  25. .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
  26. !31

  27. BEM ‣ Block, Element, Modifier ‣ 觀念跟 oop 最相似 ‣

    注重 Block 的獨⽴立性 ‣ yandex 是⽤用 BEM 建構的 !34
  28. .person {} .person__hand {} .person—female {} .person—female__hand {} .person__hand—left {}

    — 跟 __ ‣ Nicolas Gallagher 改進版。 • .block 代表某個較為⾼高階或較為抽象的樣式定義 • .block__element 代表是套⽤用在 .block 下的⼀一個⼦子元素 • .block--modifier 代表 .block 在不同狀態下的樣式 !35
  29. OOCSS(Object-oriented CSS ) ‣ 物件導向 CSS (OOP的概念) ‣ 注重 CSS

    重⽤用的⼀一種規則 ‣ 減少對 HTML 結構的依賴 (like .title h1 a {…}) ‣ 避免使⽤用 ID ‣ ⾮非必要情況下,不要使⽤用 !important ‣ 使⽤用語義來定義 class name !36
  30. OOCSS(Object-oriented CSS ) ‣ 兩⼤大原則: • Separation of structure from

    skin (把結構跟樣式分開) • Separation of containers and content (把內容跟容器分開) !37
  31. ‣ 每個網⾴頁中的樣式都可以被重複使⽤用,例如網站中 的視覺顏⾊色,還有其他結構,都可以重複使⽤用。 // 未使⽤用 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
  32. .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
  33. #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
  34. #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
  35. .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
  36. OOCSS 優點 ‣ 減少 CSS 的程式碼。 ‣ 有整潔的 HTML,有語意 class

    name,邏輯強的層 次關係。 ‣ 更好的網⾴頁優化,加快網⾴頁速度。 ‣ 良好的擴充性,可以擴充其他組件的 CSS 樣式。 !43
  37. SMACSS (Scalable and Modular Architecture for CSS) ‣ Base ‣

    Layout ‣ Module ‣ State ‣ Theme !45
  38. ‣ 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
  39. ‣ 負責定義元素不同的狀態下,所呈現的樣式。 ‣ (訊息狀態, 按鈕狀態...等) ‣ 允許使⽤用 !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
  40. ‣ 減少 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
  41. .pod { border: 1px solid #333; } ! .pod >

    h3 { margin-top: 5px; } ! .pod > ul { margin-bottom: 5px; } !52