学习中：

一. 接上篇：

1.Sass 和 Asset Pipeline

Rails 中最有用的功能之一是 Asset Pipeline, 它极大地简化了静态资源文件(CSS、Javascript 和图像)的生成和管理。咱先概述 Asset Pipeline 的作用, 然后说明如何使用 Sass 这个强大的 CSS 编写工具。

(1). Asset Pipeline

Rails 开发者要理解 Asset Pipeline 的三个概念: 静态资源目录, 清单文件, 以及预处理器引擎。

①. 静态资源目录

注：现在我们知道 custom.scss 存放位置的用意了: 因为 custom.scss 只在应用中使用,所以把它放在app/assets/stylesheets 目录中。

②. 清单文件

把静态资源文件放在适当的目录中之后, 要通过清单文件(manifest file)告诉 Rails 怎么把它们合并成一个文件(通过 Sprockets gem 实现, 而且只合并 CSS 和 Javascript 文件, 不会合并图像)。

举个例子, 我们来看一下应用默认的样式清单文件,如下代码所示：

打开文件：app/assets/stylesheets/application.css（应用的CSS清单文件）

这里关键的代码是几行 CSS 注释, Sprockets 通过这些注释引入相应的文件:

注：关于这个Rails 提供的默认清单文件可以满足我们的需求,所以不会对其做任何修改。Rails 指南中有一篇专门介绍 Asset Pipeline 的文章, 说得更详细, 请自行百度。

③.预处理器引擎

准备好静态资源文件后, Rails 会使用一些预处理器引擎来处理它们, 并通过清单文件将其合并, 然后发送给浏览器。我们通过扩展名告诉 Rails 使用哪个预处理器。三个最常用的扩展名是:Sass 文件的 .scss , Coffee-Script 文件的 .coffee , ERb 文件的 .erb 。我们在前面介绍过 ERb, 下面会介绍 Sass。咱不会使用CoffeeScript, 这是一门很小巧的语言, 可以编译成浏览器中执行的 Javascript。

④.Asset Pipeline带来的好处之一：效率

Asset Pipeline 带来的好处之一是, 能自动优化静态资源文件, 在生产环境中使用效果极佳。CSS 和 Javascript 的传统组织方式是, 把不同功能的代码放在不同的文件中, 而且排版良好(有很多缩进)。这么做对编程人员很友好, 但在生产环境中使用却效率低下——加载大量的文件会明显增加页面的加载时间, 这是影响用户体验的最主要因素之一。使用 Asset Pipeline, 生产环境中应用的所有样式都集中到一个 CSS 文件中( appli-cation.css ), 所有 Javascript 代码都集中到一个 Javascript 文件中( application.js ),而且还会简化(minify)这些文件, 删除不必要的空格, 减小文件大小。这样我们就最好地平衡了两方面的需求——开发方便,线上高效。

(2).句法强大的样式表 Sass 

Sass 是一种编写 CSS 的语言,从多方面增强了 CSS 的功能。本节我们要介绍两个最主要的功能: 嵌套和变量。(还有一个功能是“混入”, 以后用到再说再介绍。)

①. 嵌套

样式表中经常会定义嵌套元素的样式,例如, 在如下代码中, 我们定义了 .center 和 .center h1 两个样式:

使用 Sass 可将其改写成

注：内层的 h1 会自动放入 .center 上下文中。

嵌套还有一种形式,句法稍有不同。在下图代码中, 有如下的代码：

其中徽标的 ID #logo 出现了两次, 一次单独出现, 另一次和 hover 伪类一起出现(鼠标悬停其上时的样式)。如果要嵌套第二组规则, 我们要引用父级元素 #logo 。在 SCSS 中,这使用 & 符号实现:

注：把 SCSS 转换成 CSS 时,Sass 会把 &:hover 编译成 #logo:hover 。

这两种嵌套方式都可以用在如下代码中的页脚样式上, 将其改写成:

注：改完后应该验证一下 CSS 是否还能正常使用

②.变量

Sass 允许自定义变量来避免重复, 这样也可以写出更具表现力的代码。例如,如下代码中重复使用了同一个颜色代码:

注：上面代码中的 #777 是淡灰色, 我们可以把它定义成一个变量:

然后可以这样来写 CSS：

因为像 $light-gray 这样的变量名比 #777 意思更明确, 所以把不重复使用的值定义成变量往往也是很有用的。

@import "bootstrap-sprockets";
@import "bootstrap";
$gray-light: #777;
$gray-medium-light: #eaeaea;
$gray-darker: #555;
/*universal*/
body{
padding-top: 60px;
}
section{
overflow: auto;
}
textarea{
resize: vertical;
}
.center{
text-align: center;
h1{
margin-bottom: 10px;
}
}
/*typography*/
h1, h2, h3, h4, h5, h6{
line-height: 1;
}
h1{
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2{
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $gray-light;
}
p{
font-size: 1.1em;
line-height: 1.7em;
}
/*header*/
#logo{
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover{
color: #fff;
text-decoration: none;
}
}
///*image*/
//
//img{
// display: none;
//}
/*footer*/
footer{
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid $gray-medium-light;
color: $gray-light;
a{
color: $gray-darker;
&:hover{
color: $gray-darker;
}
}
}
footer small{
float: left;
}
footer ul{
float: right;
list-style: none;
margin-top: -1px;
li{
float: left;
margin-left: 15px;
}
}

使用嵌套和变量改写后的 SCSS 文件

注：Sass 提供了很多简化样式表的功能, 上面的代码中只用到了最主要的功能, 这是个好的开始。想要了解的更多, 请自行百度。

2.布局中的链接

我们已经为网站的布局定义了看起来不错的样式, 下面要把链接中使用的占位符 # 换成真正的链接地址。当然, 我们可以像下面这样直接写链接:

不过这样不太符合 Rails 之道。一者, “关于”页面的地址如果是 /about 而不是 /static_pages/about 就好了; 再者, Rails 习惯使用具名路由指定链接地址, 如下面的代码所示:

注：使用这种方式, 代码的意图更明确,而且也更灵活。如果修改了 about_path 对应的 URL, 其他使用about_path 的地方都会自动使用新的 URL。

(1).计划添加的链接如下表所示, 表中还列出了 URL 和路由的对应关系。

注：下面我们会定义好除最后一个之外的所有路由

(2).Rails 路由

为了添加演示应用中静态页面的具名路由, 我们要修改 Rails 用来定义 URL 映射的路由文件, 即 config/routes.rb 。我们先分析一下特殊的首页路, 然后再定义其他静态页面的路由。

不管哪一种方式, 我们都把根路径指向一个控制器和动作。像这样定义根路由有个重要的好处——创建了具名路由, 可以使用名称而不是原始的 URL 指代路由。对根路由来说, 创建的具名路由是 root_path 和 root_url 。二者之间唯一的区别是,后者是完整的 URL:

我们必须要遵守一个约定: 只有重定向使用 _url 形式, 其余都使用 _path 形式。(因为 HTTP 标准严格要求重定向的 URL 必须完整。不过在大多数浏览器中, 两种形式都可以正常使用。)

Rails默认生成的路由稍微有些繁琐, 借此机会我们为“帮助”页面、“关于”页面和“联系”页面定义具名路由。

与根路由一样, 这个规则也会定义两个具名路由, 分别是 help_path 和 help_url :

注：使用 as: 选项可以修改默认生成的具名路由名称()