Susy 2 教程 — 實戰篇

Susy 2 教程 — 入門篇

Susy 2 教程 — Shorhand 篇

在前面介紹了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)	中等屏幕 桌面顯示器 (≥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就能夠輕鬆製做出來。