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