Rails
Sass
TwitterBootstrap

[Rails] TwitterBootstrapとSassとAssetPipeline

More than 5 years have passed since last update.

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ベースで扱えるようにする。


Gemfile


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を編集。


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を作成&編集


app/assets/stylesheets/custom.css.scss

@import "bootstrap";


画面をリロードすると、cssが反映され、いかにもbootstrapなレイアウトになっている。

(サーバ再起動の必要があるかも)

好みのstyleになるように(まずは普通のCSSとして)編集


app/assets/stylesheets/custom.css.scss

@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に以下のように記述する。


app/assets/stylesheets/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


app/assets/stylesheets/custom.css.scss

.center {

text-align: center;
}

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


 ↓書き換え


app/assets/stylesheets/custom.css.scss

.center {

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


ネストsample2


app/assets/stylesheets/custom.css.scss

#logo {

float: left;
margin-right: 10px;
~
}

#logo:hover {
color: #fff;
text-decoration: none;
}


 ↓書き換え


app/assets/stylesheets/custom.css.scss

#logo {

float: left;
margin-right: 10px;
~
&:hover { /* 親属性である#logoは&で表す */
color: #fff;
text-decoration: none;
}
}


変数サンプル


app/assets/stylesheets/custom.css.scss

h2 {

~
color: #999;
}
~
footer {
~
color: #999;
}

 ↓書き換え


app/assets/stylesheets/custom.css.scss

$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