susy 學習之進階

      因爲如今對susy的教程有限，只有官網指南性質的文檔，而後就是w3cplus對她的翻譯，因此我從零安裝susy並調試項目到與從github上克隆susy項目同時進行，主要是爲了參考susy放在git上的書寫方式以及demo。而後參考了http://susy.oddbird.net/，查看了一些官網推薦的用susy寫的外文網站，這一舉措在研究探索susy的過程當中，給我點亮了一盞明燈，讓我看到susy在佈局方面簡潔而有力的 佈局能力，讓我在知其難而知其優雅的同時可以奮力前行。

　　好了，開始吧。

 

Susy 是一款優秀的輔助工具，可讓開發者更駕輕就熟地實現各式柵格佈局。

 

官方發佈 Susy 2 已經有些時間了，若是你很喜歡 Susy 1，那麼相信你也必定會愛上 Susy 2——新版本的配置和使用更加靈活而富有彈性。

爲何選擇 Susy?

正如上文所述，Susy 是極佳的輔助工具，能夠用來建立各類天馬行空的佈局設計，而又無需考慮其中的數學問題（譯者注：流式佈局的百分比計算須要大量的數學計算）。Susy 的魅力之處就在於，它所實現的 CSS 樣式是與 HTML 文件徹底分離的。

若是你以前使用過傳統的柵格框架，好比說 Foundation 和 Bootstrap，那麼你就應該瞭解，它們所創造的柵格都是既定的寬度值和斷點。更進一步地說，若是你想要改變佈局，那麼必須添加相應的類名到 HTML 文件中。

Susy 將這些既定樣式通通拋棄了，你能夠在任何 CSS 類型上實現柵格佈局。

快速入門

Sass 是 Susy 惟一須要依賴的環境，因此必須安裝 Sass。

同時，Susy 的設計初衷是做爲 Compass 平臺的一部分，因此，建議使用 Compass。

此外，也建議配合使用 Breakpoint 和 Vertical Rhythms 工具。

簡單安裝：

# 終端命令

compass create —using susy <project name>

或者，使用終端命令在相關項目中使用 Susy：

compass install susy

經過命令行安裝的susy，她的安裝目錄同

咱們也能夠從 git上克隆https://github.com/ericam/susy.git

Grunt 配置

// Gruntfile.js
sass: {
  dist: {
    options: {
      style: ‘expanded’,
      require: ‘susy’
    },
    files: {
        ‘css/style.css’: ‘scss/style.scss’
    }
  }
} 

快速上手

在scss中導入susy

經過終端命令初始化項目後的導入方式

經過git上克隆susy後的導入方式

Susy 最基礎的佈局

Susy 最基礎的佈局有兩個簡單的混合宏組成：

// 創建一個佈局上下文
@include container;
// 爲元素設置佈局效果
@include span(<width>);

舉例

body {
  @include container(960px);
}
nav {
  @include span(4 of 12);
}

n若是你想爲柵格內嵌的元素設置佈局效果，那麼可使用 span 混合宏計算列寬：

n nav { @include span(3 of 12); }

這麼一條語句就實現了，神奇吧，徹底不須要考慮背後的計算。Susy 會幫你作相關的數學計算，因此你能夠天馬行空地去佈局。

 

        遇到的坑：

　　　1，在修改$susy佈局配置中的columns（原先爲4改成5），compass編譯出錯，在恢復5至4的時候，有時也會編譯出錯，這個問題仍待解決。這個問題應該不是個問題，由於我重啓電腦以後就沒有再出現過。