Susy 2 教程 — 實戰篇

琅琊丶發表於2017-06-14

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)<> 小螢幕 平板 (≥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都同樣可以實現。複製程式碼

效果圖

Susy 2 教程 — 實戰篇

通過這個例子，我們可以發現，製作一個柵格系統，用Susy2,只需要用到span,container,susy-breakpoint,width-layout就可以輕鬆製作出來。

相關文章