css – SUSY2 – 教學範例 – mixin、function 介紹
這篇主要是方便以後編撰SUSY的時候可以查閱。介紹我在開發中常用的mixin與function,很少用到的方法就不在此列出囉!以下介紹內容可以配合官方網站,以寬螢幕 12 柵欄為Demo,至於 RWD的佈局,則參考前兩篇:基本、進階佈局
有即時預覽可以參考,但是只有一支SCSS檔,比較凌亂。
Play with this gist on SassMeister.
基本上建議在本機練習實作時,分割兩支檔案。
_base.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 |
@import "compass/css3"; @import "susy"; @import "breakpoint"; $susy: ( flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-position: center, columns: 4, gutters: 1/4, column-width: 60px, 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 _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 rand_bg() { background: rgba(random(255), random(255), random(255), 0.7); } |
style3.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 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 |
@import "base"; //reset 不放在 base是因為reset 不是每個scss都需要用到, //有些片段的 scss檔案會用到 _base.scss 見得要使用重設元素。 @import "compass/reset"; .container { @include _break("mobile") { @include container(); } @include _break("pad") { @include container(); } @include _break("desktop") { @include container(); } .span { @include span(7 of 12); @include rand_bg(); } .span2 { @include break; width: span(4 of 12); @include rand_bg(); } .span3 { @include break; width: span(2 of 12 wide); @include rand_bg(); } .span4 { @include break; @include rand_bg(); width: span(2 of 12 wider); } .full { @include break; @include rand_bg(); @include full; } .gutter { @include layout(12); width: gutters(); @include break; @include rand_bg(); } .gutter2 { @include layout(12); @include break; @include rand_bg(); @include gutter(); } .gutter3 { @include layout(12); @include break; @include rand_bg(); @include gutter(4); } .break_span { @include span(3 of 12); @include rand_bg(); } .break_span2 { @include span(4 of 12); @include rand_bg(); } .break_break { @include span(4 of 12); @include break; @include rand_bg(); } // last如同 SUSY ONE 的 omega, 可以把元素放到最右側(後面)。 // $susy 中 gutter-position: after 使用 last // $susy 中 gutter-position: before 使用 fisrt .last_span { //強制換行 @include break; @include span(4 of 12); @include rand_bg(); } .last_span2 { @include span(8 of 12); @include last; @include rand_bg(); } .pre { @include rand_bg(); @include span(4 of 12); @include pre(3 of 12); } .post { @include break; @include rand_bg(); @include span(5 of 12); @include post(4 of 12); } .pull { @include break; @include rand_bg(); @include pull(2 of 12); } .squish { @include break; @include rand_bg(); //squish()無法指定 layout 所以須配合 layout() @include layout(12); @include squish(2, 3); } .prefix { @include break; @include rand_bg(); @include prefix(1 of 12); } .suffix { @include break; @include rand_bg(); @include suffix(3 of 12); } .pad { @include break; @include rand_bg(); //pad()無法指定 layout 所以須配合 layout() @include layout(12); @include pad(4, 2); } .bleed { @include rand_bg(); @include bleed(20px 10px 0px 50px); @include span(3 of 12); } .bleed_x { @include rand_bg(); @include bleed-x(1em); @include span(3 of 12); } .bleed_y { @include rand_bg(); @include bleed-y(5px); @include span(3 of 12); } .isolate_function { @include rand_bg(); margin-left: isolate(2 of 12); @include span(3 of 12); } .isolate_function2 { @include rand_bg(); margin-left: isolate(2 of 12); @include span(3 of 12); } .isolate_mixin { @include isolate(100px); width: span(5 of 12); @include rand_bg(); } .isolate_mixin2 { @include isolate(150px); width: span(5 of 12); @include rand_bg(); } .isolate_keyword { @include rand_bg(); @include span(isolate 2 at 7); } .isolate_keyword2 { @include rand_bg(); @include span(isolate 2 at 8); } .gallery_wrap { @include break; @include span(12 of 12); .gallery { @include break; @include rand_bg(); @include gallery(4 of 12); margin-bottom: 10px; } } } //-------------------------------------------------------- //DEMO 的環境樣式(無關SUSY的應用教學範例) h { font-weight: bold; padding-top: 30px; padding-bottom: 10px; color: #C7417D; } h1 { @extend h; font-size: 52px; } h3 { @extend h; font-size: 20px; line-height: 1.4em; font-family: "微軟正黑體"; } .clear { @include break; height: 100px; } //-------------------------------------------------------- |
index3.html
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 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SUSY2</title> <link rel="stylesheet" href="css/stylesheets/style3.css"> </head> <body> <div class="container"> <h3></h3> <h3>@include span($span) <br>佔柵欄數</h3> <div class="span">span</div> <div class="span2">span2 span2 span2 span2 span2(當前方有float,我若不clear:both,基本上會有重疊)</div> <h3>@include span(2 wide) <br>外部擴展單側gutter寬度</h3> <div class="span3">使用了 wide 使用了擴展一側的gutter</div> <h3>@include span(2 wider) <br>外部擴展兩側gutter寬度</h3> <div class="span4">使用了 wider 擴展兩側 gutter</div> <div class="clear"></div> <h3> @include full <br> 全部柵欄。一種 span(full) 的簡寫。</h3> <div class="full">不論你的layout()多少,都橫跨所有柵欄</div> <div class="clear"></div> <h3>gutter() <br>裡面不帶任何數字,<br>該function會使用當前的gutter寬度(柵欄之間的溝寬), <br>如果當前12柵欄,就返回12柵欄的1個gutter寬度</h3> <div class="gutter">gutter</div> <h3>@include gutter(); 或 @include gutter($span); <br> 依照map預設的 gutter-position: after, 若明確指定數字,就是返回指定layout的gutter寬度。<br>如 @include gutter(12); 代表返回12柵欄的1個gutter寬度</h3> <div class="gutter2">@include gutter(); 12柵欄下的1gutter寬度</div> <div class="gutter3">@include gutter(4); 硬是要在12柵欄下,使用4柵欄的1gutter寬度。通常這種方式會造成混亂,盡量不使用。</div> <div class="clear"></div> <h3>@include break; <br> 可強制換行, 其實就是使用清除的CSS => clear:both</h3> <div class="break_span">break_span(我右邊還有空間)</div> <div class="break_span2">break_span2 break_span2 break_span2 break_span2 break_span2 (若有空間我會跑上來)</div> <div class="break_break">break_break(不管,我就是要新的一行)</div> <div class="clear"></div> <h3>@include last; <br> 指定為最後的元素。<br>如同susy one 的 omega,可以當mixin也可以是寫在span() 裡的keyword <br> 另有 @include first,但須另做設定,詳見官網</h3> <div class="last_span">last_span last_span last_span last_span last_span last_span </div> <div class="last_span2">last_span2(我是最後一個)</div> <div class="clear"></div> <h1>Margin 系列</h1> <h3>@include pre(3 of 12); <br> 像是 margin-left 的功能 </h3> <div class="pre">margin_pre margin_pre margin_pre margin_pre margin_pre margin_pre </div> <div class="clear"></div> <h3>@include post(4 of 12); <br> 像是 margin-right 的功能 </h3> <div class="post">margin_post margin_post margin_post margin_post margin_post margin_post (檢視元素可以發現右側有佔柵欄)</div> <div class="clear"></div> <h3>@include pull(2 of 12); <br> 往前拉的意思,所以有 2 + 12 行柵欄 </h3> <div class="pull">margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull margin_pull </div> <div class="clear"></div> <h3>@include squish(2, 3); <br> 兩側擠壓的意思,也就是同時使用 pre() 與 post() </h3> <div class="squish">margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish margin_squish </div> <div class="clear"></div> <h1>Padding 系列</h1> <div class="clear"></div> <h3>@include prefix(1 of 12); <br> 像是 padding-left 的功能 </h3> <div class="prefix">padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix padding_prefix </div> <div class="clear"></div> <h3>@include suffix(3 of 12); <br> 像是 padding-right 的功能 </h3> <div class="suffix">padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix padding_suffix </div> <div class="clear"></div> <h3>@include pad(4, 2); <br> 同時使用 prefix() 與 suffix() </h3> <div class="pad">padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad padding_pad </div> <div class="clear"></div> <h3>@include bleed(20px 10px 0px 50px); <br> 流血。像是傷口的血液往外擴散,超出傷口範圍。依序指定 上右下左 的超出範圍 </h3> <div class="bleed">padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed padding_bleed </div> <div class="clear"></div> <h3>@include bleed-x(1em); <br> 水平的流血範圍。</h3> <div class="bleed_x">padding_bleed_x padding_bleed_x padding_bleed_x padding_bleed_x padding_bleed_x padding_bleed_x </div> <div class="clear"></div> <h3>@include bleed-y(1em); <br> 垂直的流血範圍。</h3> <div class="bleed_y">padding_bleed_y padding_bleed_y padding_bleed_y padding_bleed_y padding_bleed_y </div> <div class="clear"></div> <h3>margin-left: isolate(2 of 12);<br> 用在function會返回一個數值。距離左邊 12柵欄中第2欄位開始的位置。</h3> <div class="isolate_function">isolate_function isolate_function isolate_function isolate_function isolate_function </div> <div class="isolate_function2">isolate_function2 isolate_function2 isolate_function2 </div> <div class="clear"></div> <h3>@include isolate(50%);<br> 從一個指定的位置中獨立出來。因為是獨立的,所以會重疊喔。</h3> <div class="isolate_mixin">isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin isolate_mixin </div> <div class="isolate_mixin2">isolate_mixin2 isolate_mixin2 isolate_mixin2 isolate_mixin2 </div> <div class="clear"></div> <h3>@include span(isolate 2 at 7); <br> 從第7個柵欄開始,佔2柵欄。因為是獨立的,所以會重疊喔。</h3> <div class="isolate_keyword">isolate_keyword isolate_keyword isolate_keyword isolate_keyword isolate_keyword </div> <div class="isolate_keyword2">isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 isolate_keyword2 </div> <!-- 務必包一層 --> <div class="clear"></div> <h3>@include gallery(4 of 12);<br> 最重要的!<br>固定寬度時需要程式做 loop ,就是使用它。<br> 無須理會最右側或最左側是否添加 first 或 last 。<br> 如同 susy one 的 susy one isolate-grid() <br><br> 因為是使用 CSS 的 :nth-child 原理,<br>所以要 loop的元素最外層,務必添加一層元素做包圍。</h3> <div class="gallery_wrap"> <div class="gallery">gallery</div> <div class="gallery">gallery</div> <div class="gallery">gallery</div> <div class="gallery">gallery</div> <div class="gallery">gallery</div> </div> </div> </body> </html> |
不同顯示裝置同樣有一個問題,就是我們希望在不同顯示裝置套用不同的動態效果,那要如何偵測當前是手機、平板、還是桌電呢,就請參考這篇。
Comments