在前面介紹了Susy2的配置(config)和簡寫(shorthand)之後，給大家介紹一下Tookit中幾個常用的巨集，然後動手做一個 Bootstrap 柵格系統
Tookit
Susy 2 的 Tookit 是圍繞我們的簡寫語法（shorthand）構建的。通過 shorthand 調整初始配置值來控制每一個細節，讓你不會被束縛在一套柵格系統上。
常用Tookit
Span [mixin]
span是一個高頻度的混合巨集，可以靈活設定元素的柵格位置。
- 語法格式: span($span) { @content }
- $span:
shorthand <span> - @content: Sass content block
//input scss
$susy: (
container:1000px,
column-width:100px,
math:static,
columns: 10, // The number of columns in your grid
gutters: .25, // The size of a gutter in relation to a single column
gutter-position:split
);
.col-left{
@include span(1);
}
.col-right{
@include span(2 last);
}
.col-half {
@include span(50%);
}
// ======= output css =========
.col-left {
width: 100px;
float: left;
margin-left: 12.5px;
margin-right: 12.5px;
}
.col-right {
width: 225px;
float: right;
margin-left: 12.5px;
margin-right: 12.5px;
}
.col-half {
width: 50%;
float: left;
margin-left: 12.5px;
margin-right: 12.5px;
}複製程式碼susy-media [mixin]
susy-media 提供了基本的媒體查詢，並內建在 susy-breakpoint 混合巨集中。
- 語法格式: susy-media($query, $no-query)
- $query:
<min-width> [<max-width>] | <string> | <pair> | <map> - $no-query:
<boolean>|<string>
// input scss
@include susy-media(30em) {
background-color: #FFF;
}
// output css
@media (min-width: 30em) {
background-color: #FFF;
}
// input scss
@include susy-media(30em 60em) { /*...*/ }
// output css
@media (min-width: 30em) and (max-width: 60em) { /*...*/ }
// input scss
@include susy-media(min-height 30em) { /*...*/ }
// output css
@media (min-height: 30em) { /*...*/ }複製程式碼susy-breakpoint [mixin]
susy-breakpoint 為混合巨集susy-media或者第三方breakpoint外掛提供不同媒體斷點查詢。
- 語法格式: susy-breakpoint($query, $layout, $no-query)
- $query: media query shorthand
- $layout:
shorthand <layout> - $no-query:
<boolean>|<string>
// input scss
$susy: (
container:1000px,
column-width:100px,
math:static,
columns: 10, // The number of columns in your grid
gutters: .25, // The size of a gutter in relation to a single column
gutter-position:split
);
@include susy-breakpoint(30em, 8) {
// nested code uses an 8-column grid,
// starting at a 30em min-width breakpoint...
.example { @include span(3); }
}
// output css
@media (min-width: 30em) {
.example {
width: 350px;
float: left;
margin-left: 12.5px;
margin-right: 12.5px;
}
}複製程式碼更多的Tookit請檢視官方文件 susydocs.oddbird.net/en/latest/t…
建立一個 Bootstrap 柵格系統
| 超小螢幕 手機 (<768px)< small="">768px)<> | 小螢幕 平板 (≥768px) | 中等螢幕 桌面顯示器 (≥992px) | 大螢幕 大桌面顯示器 (≥1200px) | |
|---|---|---|---|---|
| 柵格系統行為 | 總是水平排列 | 開始是堆疊在一起的，當大於這些閾值時將變為水平排列C | ||
.container 最大寬度 |
None （自動） | 750px | 970px | 1170px |
| 類字首 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）數 | 12 | |||
| 最大列（column）寬 | 自動 | ~62px | ~81px | ~97px |
| 槽（gutter）寬 | 30px （每列左右均有 15px） | |||
| 可巢狀 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 |
全域性配置
$susy:(
debug:(image:show), // 開啟debug
columns:12,
gutters: 0,
gutter-position: inside,
);複製程式碼小於 768px 的適配
// 展示容器元素
.container-xs{
height: 200px;
@include container;
// 大於0 ， 小於768px
@include susy-breakpoint(0 768px){
@include container;
}
}
[class^=col-xs]{
// PS：由於susy2的gutters只能設定百分比，不能給絕對值，因而選擇另一種方式
// 當class前面有col-xs的文字時，則自動加上padding左右的設定。
padding-left: 15px;
padding-right: 15px;
background-color:rgba(#CFFFA3,.8);
border-right:3px #F94B22 solid;
text-indent:2em;
height:40px;
}
// col-xs 版
@for $i from 1 through 12 {
.col-xs-#{$i}{
@include span($i)
}
}複製程式碼大於等於768px 的適配
// col-sm 版 ： >= 768px
// 這裡列寬為什麼是32.5？而不是62呢？
// 道理很簡單，因為 gutter-position：inside,會給元素設定 box-sizing:border-box
// layout shorthand :
// 12grids
// 32.5px columnWidth
// 30px gutterWidth
$SmallDevice:(12 (32.5px 30px) inside);
$breakSmallDevice: 768px; //設定斷點
[class^=col-sm]{
background-color:rgba(#F959EB,.8);
border-right:3px #F94B22 solid;
text-indent:2em;
height:40px;
}
// 展示容器元素
.container{
height: 200px;
@include container;
@include susy-breakpoint($breakSmallDevice,$SmallDevice){
@include container;
}
}
@include susy-breakpoint($breakSmallDevice){
@for $i from 1 through 12 {
@include with-layout($SmallDevice){
.col-sm-#{$i}{
@include span($i);
}
}
}
}
// 以此類推，≥992px，≥1200px都同樣可以實現。複製程式碼效果圖
通過這個例子，我們可以發現，製作一個柵格系統，用Susy2,只需要用到span,container,susy-breakpoint,width-layout就可以輕鬆製作出來。