css – SUSY2 教學範例 – 基本
即時顯示，只有一支SCSS
Play with this gist on SassMeister.
以下建議下載到自己本機，用自己習慣的編輯器來邊做邊學習囉。
範例 index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SUSY2</title> <link rel="stylesheet" href="css/stylesheets/style.css"> </head> <body> <div class="container"> <div class="a1"> <div class="text">a1</div> </div> </div> </body> </html> |
SUSY 的參數設定檔 _grids.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@import "susy"; //使用 map setting $susy: ( flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-position: center, columns: 4, gutters: .25, column-width: false, //固定柵欄的寬度，若指定如60px，可以固定總體寬度 global-box-sizing: border-box, last-flow: to, debug: ( image: show, //開發時使用show可看到柵欄，使用hide關閉柵欄顯示 color: rgba(#66f, .25), output: background, toggle: top right, ), use-custom: ( background-image: true, background-options: false, box-sizing: true, clearfix: false, rem: true, ) ); |
style.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
// // [mobile first] 的關係所以我們要以手機優先的思維來做設計 // @import "compass/reset"; //重設所有html元素 @import "compass/css3"; //如果你有許多CSS3的mixin要用，記得添加這行 @import "breakpoint"; //用SUSY無非就是要響應式設計，所以要添加。SUSY的 breakpoint(斷點) 是基於 breakpoint 這個套喔 @import "grids"; //引用susy全域的參數設定 //我習慣讓他 100%，內層元素才能擴展整個畫面的高度 html, body { height: 100%; } // // 最外層的 container 因為需要使用 @include container(); // 所以我們必須使用 susy-breakpoint 一併做柵欄的設定 // // 而container內的元素 // 因為不需要再指定柵欄數量，所以只需要使用 @include breakpoint() // .container { // 手機：0px以上, // 通常這層可以不需要用 susy-breakpoint 包圍， // 但我喜歡明確指定，所以包圍起來。 // 好處在於，程式碼一多便可一目瞭然這是給手機的樣式。 // // susy-breakpoint(0px, 4) 代表0px為斷點的開始，0px以上使用4行柵欄 @include susy-breakpoint(0px, 4) { @include container(); //渲染，若$susy map 有開啟背景柵欄顯示，才能看到柵欄 height: 100%; //擴展高度，方便檢視柵欄數量 } // 平板：640以上 @include susy-breakpoint(640px, 8) { @include container(); //重新渲染柵欄，可以覆蓋手機柵欄 } // 桌電：1280以上 @include susy-breakpoint(1280px, 12) { @include container(); //重新渲染柵欄，可以覆蓋平板柵欄 } .a1 { // 一樣給手機的樣式仍用0px包圍起來。 // 因為接下來內層有.text 若不包圍，容易視覺凌亂。 // 手機時... @include breakpoint(0px) { background: red; } // 平板以上 (因為沒指定下一個斷點，所以會包含桌電比例) 都套用 green @include breakpoint(640px) { background: green; } .text { //只在平板以上才會套用喔！ @include breakpoint(640px) { font-size: 48px; } } } } |
這些都是基本的範例，但有些地方是不是覺得重複寫了呢？還有因為功能很細，所以有點凌亂。那我們以此範本再做修改：參考這篇文章
Comments