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