Sass與Compress實戰：第三章

概要：這一章將介紹Compass如何使Web設計中最基礎的部分——佈局變得簡單。

本章內容：

　　● 網格佈局的基本原理以及什麼時候使用網格佈局

　　● 使用Compass時的CSS網格佈局框架選項

　　● 使用排版輔助器處理垂直韻律問題 　　

1. 網格佈局介紹

　　網格佈局框架能夠幫你在Web頁面中高效地使用留白，對行列間的內容，以及行列間的間隙提供統一尺寸。留白就是你的佈局中內容之間的間隙，經過在不一樣類型的信息間製造視覺隔離，幫助你更好地瀏覽內容，或者讓你的注意力集中到更重要的元素上。

1.1 不使用CSS網格佈局或者不使用網格輔助設計

　　統一的留白除了有美學上的考慮，還能幫你更好地瀏覽和閱讀內容。CSS網格佈局框架創建了一個各類統一尺寸的規範，避免你陷入在佈局中失去焦點的危險。

1.2 網格佈局系統或框架及其工做原理

　　利用網格佈局，咱們可以輕鬆的以一種看上去很舒服的方式排布圖片。

1.3 使用Sass和Compass進行網格佈局

　　網格佈局的核心原理很簡單，無非就是把內容和容器經過簡單的數學計算進行均分，而後分配。Compass和（和Sass）幫你處理這些計算，把你從經過類名來指定網格寬度的繁雜工做中解放出來。使用Sass中的變量，你能夠輕鬆地配置網格樣式，僅僅修改幾個變量就能嘗試另一種設定。

2. 開始使用網格佈局

2.1 術語

　　儘管每種CSS網格佈局框架都有一套它們本身的關於網格元素的命名，可是有些概念倒是全部框架共享的。以下表所示：

術語名	定  義	是否涉及HTML標籤
列	內容度量的垂直單位	否
容器	構成一個網格佈局的HTML元素	是
槽	網格佈局中列與列之間的統一留白	否

● 列

　　列是網格佈局框架最核心的部分。

● 容器

　　在CSS網格佈局中，你在一個容器內構造一個基於列的佈局。一個網格佈局既能夠只有一個容器也能夠有多個容器。有時候或許會構造不一樣列寬和列數的容器。在CSS網格框架中，一個容器通常來講就是一個封裝元素，多數時候是一個DIV給它指定一個用來實現網格佈局的CSS選擇器。

● 槽

　　就像房頂上的槽用來收納雨水而後將其從房頂引流到排水溝同樣，槽幫助咱們的眼睛有效地注意到內容塊之間的邊界。就像列同樣，槽也是有統一寬度的。不一樣的網格佈局會使用不一樣的算法來知足列式佈局的須要，可是所有是基於列數、列寬和槽寬的。

2.2 是否使用網格佈局，要語義仍是要實用

　　批評人士抱怨說：使用CSS類名來指定網格佈局是把展示和內容耦合了。在這個語義陣營的人堅稱，標籤應該只是關於內容和數據的，不該該包含任何關於展示的信息。而實用主義者則認爲能影響語義的是標籤而不是類名。幸虧，Compass提供了兩種選擇，在不修改原有類名的狀況下，既能夠經過添加類名又能夠使用混合器來實現網格佈局。

2.3 固定的網格佈局仍是流動的網格佈局

　　因爲網絡用戶的屏幕尺寸不一，設計人員有兩種選擇：要麼選擇一種對於大多數用戶合理的固定佈局大小（而且限制這種佈局內的內容不溢出），要麼實現一種靈活的流動佈局，讓內容自適應用戶的屏幕，甚至當瀏覽器窗口大小改變時也會自適應。

　　儘管流動佈局聽上去很誘人，可是動態內容的特性讓流動佈局變得很是難以實現和維護。

3. 使用Blueprint

　　Blueprint把一些通用的對網格佈局、段落和表格進行樣式修飾的CSS技術打包到一個框架中，而後能夠在各個項目中通用這個框架。你能夠徹底使用Blueprint，也能夠選擇Blueprint中你喜歡的模塊進行自定義。

3.1 使用原生CSS的Blueprint

　　首先下載而且解壓縮Blueprint的CSS以及支持類的文件到你的項目中，而且在你文檔的頭部加以引用。以下代碼所示：

<link rel = "stylesheet" href = "css/blueprint/screen.css">
<link rel = "stylesheet" href = "css/blueprint/print.css">
<!-- [ if lt IE 8 ]> <link rel = "stylesheet" href = "css/blueprint/ie.css"> <! [ endif ] -->

 能夠開始建立本身的網格佈局系統了。先看一個基本的佈局，以下代碼所示：

<section class = "container">
    <header class = "main span-24"> Header </header>
    <div class = "content span-20"> Content </div>
    <aside id = "sidebar" class = "span-4 last"> The last column </aside>
    <footer class = "main span-24"> Footer </footer>
</section>

　　上面的代碼中，首先在吧整個網格佈局包起來的元素上添加了一個container類名。經過給header和footer元素設置span-24的類名來讓它們佔滿網格佈局的整個寬度。

 3.2 使用Compass應用Blueprint

　　首先建立一個新的Compass項目。

compass create simple --using blueprint/basic

directory simple/
directory simple/images/
directory simple/sass/
directory simple/sass/partials/
directory simple/stylesheets/
    create simple/config.rb
    create simple/sass/screen.scss
    create simple/sass/partials/_base.scss
    create simple/sass/print.scss
    create simple/sass/ie.scss
    create simple/images/grid.png
    create simple/stylesheets/ie.css
    create simple/stylesheets/print.css
    create simple/stylesheets/screen.css
...

　　Compass首先建立了一個主樣式文件screen.scss，並引入了Blueprint。接下來，Compass建立了一個_base局部文件，其中包含了網格佈局的全部計算。Compass有不少種使用Blueprint的方法。

　　首先，Blueprint基本模式的默認screen.scss代碼以下：

// 這裏引入一個全局的重置到任何引入這個樣式表的地方
@import "blueprint/reset";

// 須要配置blueprint的話，編輯partials/_base.sass文件。
@import "partials/base";

// 引入全部默認的blueprint模塊，以便咱們可以使用這些模塊內的混合器。
@import "blueprint";

// 引入非默認的腳手架模塊。
@import "blueprint/scaffolding";

// 根據你的配置生成blueprint框架。
@include blueprint;

@include blueprint-scaffolding;

　　在生成的screen.scss文件中，添加了blueprint的reset模塊，從局部文件中引入了網格設定，引入了Compass中強大的Blueprint混合器。接下來準備生成網格佈局並添加一些Blueprint額外的特性，好比說與表格修飾相關的。利用強大的Compass的Blueprint生成網格佈局：

@mixin blueprint-grid { ... // Use these classes (or mixins) to set the width of a column. @for $n from 1 to $blueprint-grid-columns { .span-#{$n} { @extend .column; width : span($n); } } //生成span-xx類 .span-#{$blueprint-grid-columns}{ @extend .column; width : span($blueprint-grid-columns); margin : 0; } //最後一列的類不須要槽 ...  

3.3 使用Compass應用無需類名的Blueprint

　　若是不喜歡Blueprint類名修飾的方式，而更傾向於在其餘的選擇器中混合進網格樣式，能夠選用blueprint/semantic：

compass create simple --using blueprint/semantic

　　若是比較一下兩種類型生成的文件，你會發現只多了一個文件，此外在screen.scss底部多了一些額外的引入。

// 把這些局部文件合併到screen樣式文件中
@import "partials/page";
@import "partials/form";
@import "partials/two_col";

　　使用這種類型，Compass就不會再生成那些span-xx類了。你只須要使用@column混合器。Compass在two_col的局部文件中提供了一個很好的例子，代碼以下：

#container { @include container; } #header , #footer { @include column ($blueprint-grid-columns) ; } #sidebar { // One third of the grid columns , rounding down. With 24 cols , // this is 8. $sidebar-columns : floor($blueprint-grid-columns / 3 ); @include column ($sidebar-columns); } #content { // Two thirds of the grid columns , rounding up. // With 24 cols , this is 16. $content-columns : ceil(2*$blueprint-grid-columns / 3); // true means it's the last column in the row @include column ($content-columns , true) ; } }

　　這個清單中的內容雖然很短，但卻足以充分演示讓網格佈局更快的Compass技術。爲了設置總體的網格，你須要一個容器。例子中，把相應的行爲整合進了#container選擇器。你的頭尾元素也以相同的方式經過一個混合器設置成了全寬。代碼中最神奇的部分是Compass基於側邊欄和主內容分別佔1/三、2/3，計算除了側邊欄和主內容應該佔據的單元列的個數。

　　經過floor和ceil方法，你能夠進行一些基本的舍入以確保恰當的分配。若是你須要再次改變你的_base.scss局部文件中網格佈局的列數，這些代碼根本不須要修改也能正常工做。

4 在Compass中使用960網格佈局

　　另外一個著名的CSS網格框架是Nathan Smith的960網格系統。這個框架的優勢在於靈活性。它與Blueprint CSS框架大部分原理都是相同的，除了如下幾點：

　　● 960網格系統中的槽在單元列的兩邊都有，這就意味着不管是第一個列仍是最後一列在它們的外邊框上都有一個槽。

　　● 960網格系統能夠指定容器的範圍，這樣在同一個頁面中就能夠有不一樣的列數和列寬。

4.1 一個基本的960佈局

　　首先把960的相關文件引入到頁面中：

 

<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/text.css">
<link rel = "stylesheet" href = "css/960.css">

 

　　960網格系統中標籤的寫法與Blueprint示例很是類似。只是container變成了container_12，span-x類變成了grid_x。960中有一個omega類，它的做用跟Blueprint中last類很類似，可是這個只用在你強制網格佈局中的內容新起一行的時候。

4.2 在Compass中使用960網格佈局　

　　對於沒有綁定在Compass內的960網格系統，使用前須要先安裝Compass插件。

 

gem install compass-960-plugin

 

　　經過Ruby的Gems安裝完以後就能夠建立一個960網格系統的Compass項目：

compass create -r ninesixty twelve_col --using 960
directory twelve_col/
directory twelve_col/sass/
directory twelve_col/stylesheets/
    create twelve_col/config.rb
    create twelve_col/sass/grid.scss
    create twelve_col/sass/text.scss
    create twelve_col/stylesheets/grid/css
    create twelve_col/stylesheets/text.css

　　默認狀況下，這個插件建立兩個樣式表，其中之一是伴隨960的網格設置和基本段落模塊。通常的作法是把它們轉換成局部文件，在一個screen.scss樣式文件中引用它們以減小網絡請求負載。