iT邦幫忙

DAY 40
7

30天掌握Sass語法系列 第 36

Sass開發流程設計 - (10)Susy 版型種類介紹

這一次我想聊的是關於susy所提供的grid種類,
因為他不單單只能設計RWD版型而已,
一些常見的網頁版型設定也都有支援提供,
後面如果有時間的話也會設計一個susy的版型,
讓大家可以針對susy能夠更加地了解^_^

The Magic Grid

//Sass程式碼
$total-columns: 12 // 12 columns
$column-width: 4em // columns are 4em wide
$gutter-width: 1em // with 1em gutters
$grid-padding: 1em // and 1em padding on the grid container

.container
  +container

//編譯出來後,得到下面的結果

.container {
  *zoom: 1;
  max-width: 59em; // 重要處
  _width: 59em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  height: 500px;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}

你可以發現到說,
susy magic grid他是以max-width的方式來進行版型設定,
max-width的設定是,
今天你今天在一個元素上寫了max-width:400px後,
他最大寬度就只會是400px,
但如果你縮小螢幕到400以下,
該元素也會自適應來去做縮放。
如果你要設定Responsive的版型時,
絕大部分的網頁設計師也會建議你的圖片要設定為
max-width: 100%;height:auto,
這樣你的圖片在螢幕縮小時也可自適應縮放。
The Static Grid
如果你今天並不是要做responsive的版型,
那你也可以試試看susy的Static設定,
你可以使用susy預設的變數功能來調整:

//Sass程式碼
$total-columns: 12
$column-width: 4em
$gutter-width: 1em
$grid-padding: 1em
$container-style: static //設定處

.container
  +container


//編譯出來後,得到下面的結果
.container {
  *zoom: 1;
  width: 59em;  // 變成width而非max-width
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  height: 500px;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}

使用Static的固定寬度版型,
你會發現width的設定會從max-width變成width,
今天你就算拖拉螢幕解析度時,
瀏覽器下方就會出現卷軸,
畫面也不會跟著自適應縮放。

再來如果要做滿版的網頁設計:

$total-columns: 12
$column-width: 4em
$gutter-width: 1em
$grid-padding: 1em
$container-style: fluid //修改處

你希望保有960的grid,
但又希望設定更大的解析度的話:

$total-columns: 12
$column-width: 4em
$gutter-width: 1em
$grid-padding: 1em
$container-width: 1140px //直接設定網頁整體寬度,不透過grid的欄位數量來設定

我自己比較常使用的設定也是magic的版型:

$total-columns: 5
$column-width: 6em
$gutter-width: 1em
$grid-padding: 1em
$pad: 767px 8  //代入at-breakpoint來設定螢幕解析度區間與欄位寬度
$pc : 960px 12 //代入at-breakpoint來設定螢幕解析度區間與欄位寬度
.container 
	+set-container-width
	+susy-grid-background
	margin: 0 auto
	+at-breakpoint($pad)
		+container
	+at-breakpoint($pc)
		+container

綜上所述,
透過susy具有彈性且易於維護的grid設定,
你就可以去發想該如何透過它來去設計更有趣的版型,
enjoy it!

今天介紹的語法:
$container-width: 1140px //直接設定網頁總寬度
$container-style //設定版型樣式,有fluid(流體)、Static(固定版型非RWD)、Magic(寬度有max-width效果)

另也附上影片流程提供延伸學習:


上一篇
Sass開發流程設計 - (9) Off-Canvas layout with Susy
下一篇
Sass開發流程設計 - (11) Prepos 前端利器介紹
系列文
30天掌握Sass語法41

1 則留言

我要留言

立即登入留言