Ruby on Rails Tutorialのエッセンスを自分なりに整理してみる5
[Ruby基礎] ブロックとProcをちゃんと理解する
http://qiita.com/kidachi_/items/15cfee9ec66804c3afd2
の続き。
Ruby on Rails Tutorial（chapter5）
http://railstutorial.jp/chapters/filling-in-the-layout#sec-layout_exercises
##TwitterBootstrapの導入
Bootstrapでは、動的なCSS生成のためにLESSを使用している。
一方でRailsのAssetPipeline（詳細後述）はデフォルトではSassをサポートする。
→bootstrap-sass（gem）を導入し、Sassベースで扱えるようにする。
source 'https://rubygems.org'
ruby '2.0.0'
#ruby-gemset=railstutorial_rails_4_0
gem 'rails', '4.0.1'
gem 'bootstrap-sass', '2.3.2.0'
bundle install
その後rails server再起動。
AssetPipelineがSassを処理できるようにconfig/application.rbを編集。
#Asset Pipeline互換の行を追加
require File.expand_path('../boot', __FILE__)
~
module SampleApp
class Application < Rails::Application
~
#AssetPipelineによるコンパイル対象を増やす
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
end
app/assets/stylesheets/custom.css.scssを作成&編集
@import "bootstrap";
画面をリロードすると、cssが反映され、いかにもbootstrapなレイアウトになっている。
（サーバ再起動の必要があるかも）
好みのstyleになるように（まずは普通のCSSとして）編集
@import "bootstrap";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
~
##SassとAssetPipeline
####AssetPipelineとは
jsやcssをそれぞれ単一ファイルに結合してリクエスト数を削減したり、
自動で空白やコメントを削除してファイルサイズを最小化してくれる機能。
その中でも以下3点は抑えておく。
- アセットディレクトリ
- マニフェストファイル
- プリプロセッサエンジン
###アセットディレクトリ
静的ファイルを目的別に分類する3つのディレクトリ（Rails3.1以降から）
app/assets: アプリケーション固有のアセット
lib/assets: ライブラリ用のアセット
vendor/assets: サードパーティのアセット
###マニフェストファイル
アセットディレクトリにあるファイルをどのように結合するのか指定できる。
例えば、app/assets内のCSSのマニフェストはapplication.cssに以下のように記述する。
/*
* This is a manifest file that'll automatically include all the stylesheets
* available in this directory and any sub-directories. You're free to add
* application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style
* scope.
*= require_self
*= require_tree .
*/
重要なのは最後の2行。
*= require_tree .
→app/assets/stylesheetsディレクトリ (サブディレクトリを含む) の
すべてのCSSファイルをアプリケーションCSSにインクルードすることを指定。
*= require_self
→application.css自身もインクルードすることを指定。
###プリプロセッサエンジン
各アセットを実行し、生のcssやjsを吐き出す。
その際どのプリプロセッサを用いるかは拡張子で判別する。
.scss（Sass）
.coffee（CoffeeScript）
.erb（ERb）
など
##Sass
###Sassとは
CSSをよりプログラマブルに記述するための言語。
ネストや変数といった機能をサポートする。
###ネストsample
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
↓書き換え
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
###ネストsample2
#logo {
float: left;
margin-right: 10px;
~
}
#logo:hover {
color: #fff;
text-decoration: none;
}
↓書き換え
#logo {
float: left;
margin-right: 10px;
~
&:hover { /* 親属性である#logoは&で表す */
color: #fff;
text-decoration: none;
}
}
###変数サンプル
h2 {
~
color: #999;
}
~
footer {
~
color: #999;
}
↓書き換え
$lightGray: #999;
h2 {
~
color: $lightGray;
}
~
footer {
~
color: $lightGray;
}
これでだいぶすっきり書ける。
Tutorial内全体の記述は以下から参照。
http://railstutorial.jp/chapters/filling-in-the-layout?version=4.0#code-refactored_scss
##以下に続く
Railsにおけるリンクの記述方法とそのテスト
http://qiita.com/kidachi_/items/d704e7eb63513c3831ae