iT邦幫忙

DAY 1
5

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

Sass教學(1) - susy2 - Grid settings(上)

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

以下文章同步於Github

susy1到susy2又是一個可怕的里程碑,
原本覺得susy1已經很強大了,
但在susy2面前,susy1就像是玩具一樣,
首先我們就先從他的變數設定來一一說起吧,

範例程式碼
susy2 settings
sassmeister範例

環境建置
Sass 3.3以上
Compass
Breakpoint
如果你不想安裝ruby環境,Fire.app可以直接撰寫Sass與Susy2

susy2 settings
在看susy2的變數設定前, 我們再回頭看一下susy1的設定:

@import "susy";
@import "susyone";
$total-columns : 12;    // 欄數
$column-width  : 60px;  // 欄寬
$gutter-width  : 20px;  // 欄與欄之間的距離
$grid-padding  : $gutter-width/2; // grid左右邊的外間距
.container{
  @include container    // max-width: 940px; padding-left: 10px;padding-right: 10px;
}

在以前用susy1設計grid的時候, 輸入變數後,使用他的container mixin就會自動幫你加總他的寬度。 欄與欄之間則是用margin-right來推gutter。

官網介紹的susy2簡易版設定如下:

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
);

columns與gutters在susy1就已經有其概念了, 這裡我主要先要來講gutter-position的屬性,

gutter-position的各種功能

before:推左外間距(margin-left)
after :推右外間距,同susy1(margin-right)
split :左右外間距各推gutter的一半,同960grid
inside:推欄的左右內距(padding-left、padding-right)
inside-static :用inside會用%來推padding,這則是以單位來推,例:px、em,看你的column-width是用什麼單位

透過gutter-position,我們就能依照自己的開發習慣,來編譯出自己開發習慣的gutter出來。

如何設計你要的Grid總寬度
1.你可直接在css上面寫

.wrap{ @include container(960px) }

2.或者是透過變數自動編譯為:

$susy: (
    columns: 12,
    gutters: 1/3,      //只能用幾分之幾,不能用單位
    column-width:60px, //預設是false,但要透過susy2自動計算出總寬此變數必加
    math: fluid,       //使用fluid的話,所有編譯出來的單位都是%,但使用[static]再配合column-width則就會變成px、em
    output: float,
    gutter-position: after,
);
.wrap{
    @include container;
}

下一篇
Sass教學 (1) - susy2 - Grid settings(上)
系列文
Sass3.3 & CSS設計模式46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
roger03
iT邦新手 4 級 ‧ 2014-09-17 16:12:28

好文

0
reyes
iT邦新手 4 級 ‧ 2015-01-22 11:13:11

很棒的教學!

我要留言

立即登入留言