2014-09-22 / JSN / 2 Comments / 833 次瀏覽
原理是這樣，建立三個不讓使用者看見的DIV，分別代表 mobile, pad, desktop，利用 SUSY 讓他們能在三種裝置個別顯示。最後在透過 JS 去得知那三個 DIV 有顯示的是誰。
說明如下：
index5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判斷當前的屏幕</title>
<link rel="stylesheet" href="css/stylesheets/style5.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function (){
//原理是：判斷目前螢幕中是誰可以被看見
function current_screen()
{
return $(".current_screen").find("li:visible").attr("class");
}
//取得當前的屏幕
$(".get_screen").on("click", function (){
var scr = current_screen();
if (scr == "mobile") alert("執行手機");
else if (scr == "pad") alert("執行平板");
else if (scr == "desktop") alert("執行桌電");
})
})
</script>
</head>
<body>
<div class="container">
<input class="get_screen" type="button" value="取得當前的屏幕">
</div>
<!--可在body 內建立一個判別的元素，隱藏的特別方法參考SCSS -->
<ul class="current_screen">
<li class="mobile"></li>
<li class="pad"></li>
<li class="desktop"></li>
</ul>
</body>
</html>
style5.scss
@import "base";
@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();
}
}
// 判別使用
// 但不必給使用者看到所以隱藏起來。
.current_screen
{
// 視覺隱藏不可以使用 display: none ，
// 因為JQ在判斷中，確實會把你隱藏的元素當作 "不可見"，
// 所以我們要用這種方法來欺騙電腦
height: 0px;
overflow: hidden;
//安全起見，指定寬高，確保有會被顯示出來
li
{
width: 1px;
height: 1px;
}
.mobile
{
@include _break("mobile") {display: block;}
@include _break("pad") {display: none;}
@include _break("desktop") {display: none;}
}
.pad
{
@include _break("mobile") {display: none;}
@include _break("pad") {display: block;}
@include _break("desktop") {display: none;}
}
.desktop
{
@include _break("mobile") {display: none;}
@include _break("pad") {display: none;}
@include _break("desktop") {display: block;}
}
}
_base.scss
@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 結束 ----------
2014-09-22 / JSN / 1 Comment / 416 次瀏覽
我們每建立一次SUSY專案，勢必要回想一下版面配置的參數設定之類的。這幾段程式碼可以方便開發時直接貼上，在依個人需求做 SCSS 檔案的分割即可囉。
即時範例
Play with this gist on SassMeister.
style4.scss
@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
<!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>
2014-09-19 / JSN / 3 Comments / 875 次瀏覽
這篇主要是方便以後編撰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>
不同顯示裝置同樣有一個問題，就是我們希望在不同顯示裝置套用不同的動態效果，那要如何偵測當前是手機、平板、還是桌電呢，就請參考這篇。
2014-09-18 / JSN / 6 Comments / 1,462 次瀏覽
主要示範整理後的SUSY布局，說明都打在裡面囉！
把後面多個SCSS合併為一個後的即時預覽
Play with this gist on SassMeister.
以下為原始範例。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SUSY2</title>
<link rel="stylesheet" href="css/stylesheets/style2.css">
</head>
<body>
<div class="container">
<div class="a1">
<div class="text"> a1 </div>
</div>
</div>
</body>
</html>
_grids2.scss
// Requirements
// ============
@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: 60px, //這裡使用固定柵欄寬度，預設是 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
)
);
_custom_mixin.scss
//方便撰寫的自訂 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;
}
}
style2.scss
@import "compass/reset";
@import "compass/css3";
@import "breakpoint";
@import "grids2";
@import "custom_mixin"; //自訂的mixin放在這裡
*
{
//CSS3的功能，建議所有元素都使用吧！
@include box-sizing(border-box);
}
html, body
{
height: 100%;
}
.container
{
//使用我們前面自訂的 mixin
//當在手機時
//我們使用 container() 重新渲染
//並設定高度 100%
@include _break("mobile")
{
@include container();
height: 100%;
}
//當發生在平板時
@include _break("pad")
{
@include container();
}
//桌電時...
@include _break("desktop")
{
@include container();
}
.a1
{
@include _break("mobile")
{
background: #D22D2D;
@include span(1 of 4);
//因為使用了 @include box-sizing(border-box) 所以不會超出邊界
border: black 10px solid;
}
@include _break("pad")
{
background: #29C94E;
@include span(1 of 8);
}
@include _break("desktop")
{
background: #9864D2;
// 因為 desktop 我們使用12柵欄，
// 若 1 of 12 會是一柵欄，
// 那如果 1 of 16呢？
// 背景顯示12欄，但會切成16等分喔
@include span(1 of 16);
}
//"只有"在平板才作用
.text
{
@include _break("pad")
{
font-size: 40px;
}
@include _break("desktop")
{
font-size: initial;
}
}
}
}
最後，需要開始了解各種mixin了，所以請繼續閱讀這篇文章。
如果要用 jQuery 判別當前使用的是哪種顯示裝置，可以參考這篇。
對於 $susy 地圖的設定有不了解的，可以參考這篇。
2014-09-17 / JSN / 4 Comments / 1,515 次瀏覽
即時顯示，只有一支SCSS
Play with this gist on SassMeister.
以下建議下載到自己本機，用自己習慣的編輯器來邊做邊學習囉。
範例 index.html
<!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
@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
//
// [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;
}
}
}
}
這些都是基本的範例，但有些地方是不是覺得重複寫了呢？還有因為功能很細，所以有點凌亂。那我們以此範本再做修改：參考這篇文章