Susy 2 教程 — 入門篇

關於Susy

Susy 是一款進行柵格佈局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。它的能力正如官網的簡介一樣強大：

Your markup, your design, your opinions, out math.

柵格佈局

柵格設計的特點是重視比例、秩序、連續感和現代感。 以及對存在於版面上的元素進行規劃、組合、保持平衡或者打破平衡，以便讓資訊可以更快速、更便捷、更系統和更有效率的讀取；另外最重要的一點是，負空間的規劃（即：留白）也是柵格系統設計當中非常重要的部分。—— 維基百科

參考文獻：sagashen.lofter.com/post/11545c…

安裝與使用

Susy 是基於 Sass 開發的，嚴格上講並不是一個框架，而是類庫，起初，它的設計初衷是作為 Compass 平臺的一部分。建議大家在 Compass 的環境下使用 Susy。

Susy 並非一定要基於 Compass，它還支援 Webpack，Gulp，Grunt等自動化工具編譯，詳細可以檢視官網文件

#終端指令
gem install susy

#如果已有compass專案
compass install susy

#如果是新初始化compass專案
compass create --using susy 複製程式碼

預設你專案的 專案名/sass/ 資料夾下會生成一個 _grids.scss 檔案

開啟 _grids.scss 檔案，已經引入了 susy

// Requirements
// ============

@import "susy";

$susy: (
  columns: 12,
  gutters: 1/4,
);複製程式碼

小試牛刀

// sass
$susy: (
  container:960px,
  columns: 12,  // The number of columns in your grid
  gutters: 1/4, // The size of a gutter in relation to a single column
);

.container{
    @include container;
}

.sidebar{
    @include span(2);
}

.main{
    @include span(10)
}複製程式碼

// output
.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

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

.sidebar {
  width: 15.25424%;
  float: left;
  margin-right: 1.69492%;
}

.main {
  width: 83.05085%;
  float: left;
  margin-right: 1.69492%;
}複製程式碼

專業詞釋義

isolate 佈局

針對不同瀏覽器對小數點的四捨五入處理修正，如圖：

gutter , row , container

溝，行，全域性

設定篇

預設配置

$susy 是 Susy載入後自動讀取的一個全域性配置變數。

$susy: (
  // 從左至右
  flow: ltr,
  // 可選值： fluid | static , 網格的計算單位，fluid是百分號%，static是作用域的倍數em                    
  math: fluid,                       
  // 可選值： float | isolate, float是浮動形式，不解釋，isolate是一種百分比溢位的修復.
  // 詳細看http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
  output: float,
  // 可選值：before | after | split | inside | inside-static , 
  // before,after對應margin-right,margin-left,
  // split是padding-left&padding-right,
  // inside-static也是padding,但是單位是px,                    
  gutter-position: after,      
  // 可選值： <length> | auto , 總區域寬度，auto則以父元素的寬度為值     
  container: auto,                  
  // 可選值： left | center | right | <length> [*2]，總區域的水平對齊方式
  container-position: center,        
  // 列數
  columns: 4,                        
  // 溝值
  gutters: .25,                        
  // 可選值：<length> | false/null ，設定每列寬度，這個比較雞肋，絕大部分情況下不用設定，除非需求奇葩。
  column-width: false,                
  // 可選值：border-box | content-box
  global-box-sizing: content-box,    
  // 可選值：from | to ,建議不要改這個值，當你改成from的時候，last方法將不起作用
  last-flow: to,                    
  // debug，通過gradient製作的背景grid條，很棒的debug工具
  debug: (                            
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  // 自定義 mixins
  use-custom: (                     
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);複製程式碼

Layout [function/mixin]

可以轉換map配置，有mixin和function兩種用法：

function用法

• Format: layout($layout)
• $layout:<layout>

// input
$map: layout(auto 12 .25 inside fluid isolate);

// 終端列印一下
@debug $map;

//output
$map: (
  container: auto,
  columns: 12,
  gutters: .25,
  gutter-position: inside,
  math: fluid,
  output: isolate,
);複製程式碼

mixin用法

• Format: layout($layout, $clean)
• $layout: <layout>
• $clean: <boolean>

@include layout(12 1/4);
// 預設情況下，這些新設定將新增到現有的全域性設定中。使用$clean引數從頭建立新的設定。複製程式碼

With-layout [mixin]

可以通過此mixin設定多個柵格系統，而互相之間不衝突。

• Format: with-layout($layout, $clean) { @content }
• $layout:<layout>
• $clean: <boolean>
• @content:Sass content block

@include with-layout(8 static) {
  // Temporary 8-column static grid...
}

// Global settings are restored...複製程式碼

Susy-Get [function]

獲取配置引數

• Format: susy-get($key, $layout)
• $key: Setting name
• $layout: <layout>

$large: layout(80em 24 1/4 inside);
$large-container: susy-get(container, $large);
// debug output : 80em複製程式碼

原創連結：github.com/Janking/Blo…