css – SUSY2 – 教學範例 – mixin、function 介紹
這篇主要是方便以後編撰SUSY的時候可以查閱。介紹我在開發中常用的mixin與function,很少用到的方法就不在此列出囉!以下介紹內容可以配合官方網站,以寬螢幕 12 柵欄為Demo,至於 RWD的佈局,則參考前兩篇:基本、進階佈局
有即時預覽可以參考,但是只有一支SCSS檔,比較凌亂。
Play with this gist on SassMeister.
基本上建議在本機練習實作時,分割兩支檔案。
_base.scss 基本設定檔
@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
@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
<!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