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…