学习中：

一. 接上篇：

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 通过这些注释引入相应的文件:

其中
*= require_tree .
会把 app/assets/stylesheets 目录中的所有 CSS 文件(包含子目录中的文件)都引入应用的 CSS 文件。
下面这行:
*= require_self
会把 application.css 这个文件中的 CSS 也加载进来。

注：关于这个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 的功能。本节我们要介绍两个最主要的功能: 嵌套和变量。(还有一个功能是“混入”, 以后用到再说再介绍。)

前面简单说过, Sass 支持一种名为 SCSS 的格式(扩展名为 .scss ), 这是 CSS 的一个严格超集。SCSS只为 CSS 添加了一些功能, 而没有定义全新的句法。
也就是说,所有有效的 CSS 文件都是有效的 SCSS 文件, 这对已经定义了样式的项目来说是件好事。在我们的应用中, 因为要使用 Bootstrap, 所以从一开始就使
用了 SCSS。Rails 的 Asset Pipeline 会自动使用 Sass 预处理器处理扩展名为 .scss 的文件, 所以 custom.scss文件会首先经由 Sass 预处理器处理,
然后引入应用的样式表中,再发送给浏览器。

①. 嵌套

样式表中经常会定义嵌套元素的样式,例如, 在如下代码中, 我们定义了 .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.布局中的链接

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

<a href="/static_pages/about">About</a>

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

<%= link_to "About", about_path %>

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

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

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

(2).Rails 路由

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

目前,我们见到了三种定义根路由的方式,
首先是:
root 'application#hello'
然后是:
root 'users#index'
最后是:
root 'static_pages#home'

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

root_path -> '/'
root_url -> 'http://www.baidu.com/'

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

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

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

help_path -> '/help'
help_url -> 'http://www.example.com/help'

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

猜你喜欢