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 :; }    //最后一列的类不需要槽
...        

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/3、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样式文件中引用它们以减少网络请求负载。