SUSY (one) 筆記

@import susy // 匯入susy

// 960 grid
$total-columns: 12 // 欄位數量
$column-width: 60px // 欄位寬度
$gutter-width: 20px // 欄位間距寬度
$grid-padding: 10px // 格線最外圍左右邊的間距
(總寬 = column-width x total-column + gutter-width x (total-column -1 ) + grid-padding x 2)
(總寬 = (column-width + gutter-width) x total-column - gutter-width + grid-padding x 2)
$ipad: 767px 8  // min-width: 240px，前後相反的話變成max-width: 240px
$mobile: 240px 4 // min-width: 767px

.page
  +at-breakpoint($mobile) // 當螢幕解析度在240px以上時，總寬度最大可達320px
    +container // container也是susy的mixin，主要用來編譯出整體寬度
    // +set-container-width 只有寬度，左右不會留白
    +susy-grid-background // 顯示格線背景

// 分派欄位
.main
  +span-columns(9, 12) // 12欄佔9欄
.sidebar
  +span-columns(3 omega, 12) // 12欄佔3欄，omega可以實現元素併排，也可以置右

.main
  height: 500px
  background: red
  +span-columns(3)
  +isolate(6) // 定位在第6個位置
  +isolate-grid(3) // 12欄，佔3個欄位，也就是3*4設計

// 版型種類
$container-width: 1140px //直接設定網頁總寬度
$container-style //設定版型樣式，有fluid(流體)、static(固定版型非RWD)、magic(寬度有max-width效果)

clearfix的方式

1.
.clearfix:after{ 
content: "";
display: block;
clear: both;
} 

2.
.clearfix{
overflow: auto;
_height: 1%;
}
3.
.clearfix{
overflow: hidden;
_zoom: 1;
}
4.
.clearfix:after{
content: "";
display: block;
clear: both;

5.最佳
.clearfix{
*zoom: 1;
}
.clearfix:before,.clearfix:after{
display: table;
content: "";
}
.clearfix:after{
clear: both;
}