Ruby on Rails Tutorial 第五章 完善布局

標籤：

本章目標：局部視圖、Rails路由、Asset Pipeline、Sass
1、Bootstrap是Twitter開發的開源Web設計架構
mockup是網頁構思圖，在web領域經常稱之為“線框圖”，用於展示應用最終外觀的草圖
伺服（p130）

<%= link_to "Help", "#"%>
#link_to的第一個參數是連結文本，第二個參數是連結地址，第三個參數可選，是一個雜湊。

Asset Pipeline帶來的好處之一是，能自動最佳化資源檔，在生產環境中使用效果極佳。

2、Sass:它是一種編寫CSS的語言，從多方面增強了CSS的功能。主要介紹兩個主要的功能：嵌套和變數。Sass檔案的擴充
名為.scss，這是CSS句法的一個擴充集。所有有效CSS檔案都是有效SCSS檔案。Rails的Asset Pipeline會自動使
用Sass前置處理器處理副檔名為.scss的檔案，所以custom.css.scss檔案會首先經由Sass前置處理器處理，然後引入應用
的樣式表中，再發送給瀏覽器。

（1）嵌套：

.center {    text-align: center;}.center h1{    margin-bottom: 10px;}

嵌套格式如下：

.center {    text-align: center;    h1{        margin-bottom: 10px;    }}

#logo {    float: left;    margin-right: 10px;}#logo:hover {    color: #fff;    text-decoration: none;}

嵌套格式如下：

#logo {    float: left;    margin-right: 10px;    &:hover { #在SCSS中，用&符合實現對父級元素的引用        color: #fff;        text-decoration: none;    }}

（2）變數：

h2 {    color:#777;}footer {    color:#777;}

變數使用方法如下：

$light-gray: #777;h2 {    color: $light-gray;}footer {    color: $light-gray;}

3、布局中的連結
具名路由：<%= link_to "About", about_path %> 如果修改了about_path對應的URL，其他使用about_path的地方都
會自動使用新的URL。

 

Ruby on Rails Tutorial 第五章 完善布局