css – SUSY2 – 快速開發模板
我們每建立一次SUSY專案，勢必要回想一下版面配置的參數設定之類的。這幾段程式碼可以方便開發時直接貼上，在依個人需求做 SCSS 檔案的分割即可囉。
即時範例
Play with this gist on SassMeister.
style4.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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
@import "susy"; @import "breakpoint"; @import "compass/css3"; //-------- 設定 開始 ----------- //susy 環境設定 $susy: ( flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-position: center, columns: 4, gutters: 1/4, column-width: false, global-box-sizing: content-box, last-flow: to, debug: ( image: show, color: rgba(#66f, .25), output: background, toggle: top right, ), use-custom: ( background-image: true, background-options: false, box-sizing: true, clearfix: false, rem: true, ) ); //設定三種尺寸 $break_layout : ( mobile: ( break: 0px, layout: 4 ), pad: ( break: 640px, layout: 8 ), desktop: ( break: 1280px, layout: 12 ) ); //-------- 設定 結束 ----------- //-------- Mixin 開始 ---------- //方便撰寫的自訂 mixin 斷點樣式 @mixin _break($screen: mobile) { $map : map-get($break_layout, $screen); $break: map-get($map, "break"); $layout: map-get($map, "layout"); @include susy-breakpoint($break, $layout) { @content; } } //-------- Mixin 結束 ---------- //-------- 樣式設計 開始 -------- @import "compass/reset"; * { @include box-sizing(border-box); } html, body { height: 100%; } .container { @include _break("mobile") { @include container(); height: 100%; } @include _break("pad") { @include container(); } @include _break("desktop") { @include container(); } } |
index4.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速開發模板</title> <link rel="stylesheet" href="css/stylesheets/style4.css"> </head> <body> <div class="container"> SUSY - Hello World ! </div> </body> </html> |
Comments