LoginSignup
45

More than 5 years have passed since last update.

[Rails] TwitterBootstrapとSassとAssetPipeline

Last updated at Posted at 2013-11-25

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45