並不是使用Susy2,就表示所有和layout有關的都必須全部導入
Susy2確實是一個強大的Gird framework(格線框架系統),
但你要記得他始終是一個Framework,
有些你希望能夠更客製化來設定版型,
還是必須自己手寫一些基本的CSS,
才能夠達成你要的效果,
在這裡也舉一些案例, 提供大家參考。
1.固定版型與滿版版型的結合
今天你希望設計一個960Grid的版型,
但你又希望表頭header能夠滿版隨著螢幕解析度延伸,
像是這樣子,
有些網頁設計師可能就傻了,
因為Gird都設960px了,
怎麼可能再延伸呢?
但其實要做得事情只是在Grid外面再多包一層,
由於DIV是塊狀元素(block),
所以自然會隨著螢幕解析度自適應延伸,
程式碼如下:
@import 'compass';
@import 'susy';
$susy: (
columns:12,
math: fulid,
column-width:60px,
gutter-position: after,
gutters:1/3,
debug:(image:true)
);
.header{
background: pink; //第一層DIV父元素是瀏覽器,所以會隨著螢幕解析度自適應延伸
}
.header-inner {
@include container() ;
height:80px;
}
.container{
@include container
}
.sidebar{
@include span(3);
height: 50px;
background:blue;
}
.main{
@include span(9 last);
background:black;
color:#fff;
height: 50px;
}
這部份則是很基本的行內元素(inline)、塊狀元素(Block)的觀念, 所以並不是每個DIV都一定要寫寬度,
有的時候也可以讓塊狀元素隨著父元素限制來自適應延伸,
這樣才不會導致要寬度使得要改很多的地方。
這個問題是我時常被問Susy觀念的第一名,
老實說連我自己也很驚訝,
這裡還是要強調Susy只是一個格線框架,
實際上的運用方式還是必須自己規劃,
再結合一些原生的CSS觀念,才能夠更加凸顯出Susy的優勢。
2.使用Padding推擠Column時,導致欄寬設定跑掉
Susy2的版型預設是content-box的Layout,
瀏覽器預設也是content-box,
也就是下面的程式碼,
你覺得.box的寬度是多少呢?
.box{
width: 50px;
padding-left:10px;
padding-right:10px;
border-right:3px solid #000;
}
答案是73px,
原因是padding會破壞原本設定的寬度,
再往外延伸,加上border也有佔寬度,
加起來就剛好等於73px。
所以在CSS3出來以後,
則出了一個新的屬性是box-sizing:border-box,
如果你在上面的程式碼加上這行,
這樣.box就會依照你設定的width是多少,
寬度就還是維持那樣,
使用padding與border的話,
他就會向內縮來呈現,就不會破壞設定好的寬度了,
所以當你寫了這樣的程式碼:
.box{
@include span(5); // width: 5column
@include Prefix(1); //padding-left:1 column
}
會發現你的columns佔了6欄,
原因就是Susy2預設是content-box的設定,
如果你要避免這樣的問題發生,
Susy2官網與css-tricks建議你這樣子來設定:
$susy:(
global-box-sizing: border-box,
);
@include border-box-sizing;
//編譯出來的CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*代表所有元素的意思,
這樣就能讓你所有的元素都吃到border-box的效果,
現在你想設定幾欄就都不用怕欄寬設定跑掉了。
3.Susy2是使用Float排版的
這是要講clear清除float的觀念,
所以如果你排版有使用到spanMixin,
產生出來的Grid就會是使用Float排版,
但有的時候,你後面設定的元素並沒有打算用Float的時候,
就必須用clear清除浮動,
像是Susy2有break、nobreak的Mixin,
但其實他們編譯出來Code也就只有一行而已,
也就是clear:both與clear:none,
清除浮動的觀念可以再瀏覽此排版教學。
總結
Susy2他的性質和Bootstrap不太一樣,
Bootstrap是已經設定好規則,
他follow他的規則就可以排出好看的版型,
但Susy2只負責Grid的設計,
其他的部分你必須很了解網頁排版觀念,
才能夠信手拈來設計出你想要的Grid,
若是你朋友也想學Susy2的話,
不妨先問他塊狀、行內元素、content-box、border-box、clear清除float的觀念看看, 如果他都一知半解的話,那可能要再好好把基礎打穩再來學,學習曲線會比較低哩。