iT邦幫忙

DAY 2
1

Sass3.3 & CSS設計模式系列 第 3

Sass教學 (2) susy2 - Grid settings(中)


影片教學請點選下圖連結↓

以下文章同步於Github

上個章節講了susy2的簡易設定方式, 接著我們來看它預設的全域設定,
susy2 global-defaults

Global Defaults

$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 4,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: 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,
  )
);

只要你載入了susy2以後, 上面的Global Defaults就會自動載入, 接著我再來針對一些我個人常用的設定來進行解說
flow
預設:ltr
選項:ltr、rtl
susy2預設是用float:left從左到右來排列Grid,
而susy1也是一樣,
如果你希望你的欄是從右邊排到左邊, 再把設定改為rtl即可。

container
預設:auto
選項:可自行設定grid的寬度,例:960px、60em
container可以直接寫Grid的總寬度進去,
他會依照你columns與gutters的設定,
自動算出數值, 所以如果你不想要透過column-width來算出總寬的話,
那也可以使用container的功能。

container-position
預設:center
選項:left、center、 right、 <length>
預設是center,也就是讓你的Grid水平置中,
left、right則是可讓你的Grid靠左或靠右對齊,
而length則是自己寫一個自訂數值,
這樣你的margin-left、與margin-right則會改為你的數值。

global-box-sizing
預設:content-box
選項:content-box、border-box

這個這跟盒模型(Box Model)有關,
這個設定有點奇怪,
不曉得是不是我設定錯了還是怎樣,
所以我弄不起來,
這個設定我是自己用CSS寫的,

但這裡的原理我個人認為還蠻重要的,
這跟盒模型(Box Model)有關, 瀏覽器預設都是content-box的設定, 也就是如果你今天有個div設定寬50px後, 但又下了padding-left:10px與padding-right:10px後
該div會變成70px,
所以有些設計師在使用Grid的時候,
因為不懂content-box的原理,
導致欄變寬,就變成不是依照比例去排,
例如下圖都是一欄的寬度,

但如果在黑色的div推擠了左右padding,就不符比例,

這問題在以前也相當困擾網頁設計師,
直到CSS3多了box-sizing的語法,
在susy2的文件也有介紹到,
他提到如果你的網頁只要兼容到IE8以上,
建議你可以在reset.css上加上這行,

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

這樣子你的盒模型只要設定一個寬度,
不管你是用padding或border,
他的寬度就都不會受到影響了。

我自己是都習慣用box-size: border-box了,
但如果你的客源都還是必須兼容ie7以下,
那就沒辦法使用這個設定了。

last-flow
預設:to
選項:to、from
預設是to的情況下, 寫了下面的語法,
.content就會變成與float:right,
如果改成from的話,則會變成float:left, 如果你的gutter-position設定成after或before的話,
那就可能有機會會改到這個設定,
PS:這裡的last就等於susy1的omega

.conetne{
  @include span(1 last)
}

use-custom clearfix
預設:false
選項:true、false

susy2會自動抓取compass預設的clearfix的mixin,
但如果你不希望susy2使用compass的clearfix,
你可以在這設定寫true後,
自己寫一個名稱為clearfix的mixin, susy2會優先抓取你的mixin設定

下一章節會再來針對debug模式,
搭配compass vertical rhythm來做詳細的解說。


上一篇
Sass教學 (1) - susy2 - Grid settings(上)
下一篇
Sass教學 (3) - susy2 Grid settings(下)
系列文
Sass3.3 & CSS設計模式46

尚未有邦友留言

立即登入留言