【34日目】【1日20分のRailsチュートリアル】【第5章】SassとAsset Pipelineの解説読む

Ruby on Railsチュートリアル(第3版)

今日は「5.2 SassとAsset Pipeline」から。

5.2 SassとAsset Pipeline

5.2.1 Asset Pipeline

Rails3.1以降では、静的ファイルを目的別に分類する、標準的な3つのディレクトリが使用されるようになりました。最新のRailsでも同様です。

・app/assets: 現在のアプリケーション固有のアセット ・lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット ・vendor/assets: サードパーティのアセット

各ディレクトリには意味がある、と。

Asset Pipelineを使うと、この「開発効率と読み込み時間のどちらを重視するか」という問題について悩む必要がなくなります。
開発環境ではプログラマにとって読みやすいように整理しておき、本番環境ではAsset Pipelineを使ってファイルを最小化すればよいのです。
具体的には、Asset Pipelineがすべてのスタイルシートを1つのCSSファイル (application.css) にまとめ、 すべてのJavaScriptファイルを1つのJSファイル (javascripts.js) にまとめてくれます。
さらに、それらのファイルすべてに対して 不要な空白やインデントを取り除く処理を行い、ファイルサイズを最小化してくれます。

なるほど。書きやすさと実効速度、どちらかを犠牲にする必要はない、ってことか～。

5.2.2 素晴らしい構文を備えたスタイルシート

Sassの説明。

スタイルシート内に共通のパターンがある場合は、要素をネストさせることができます。

まず"ネスト"について。
ネストを使いとクラス名やid名を何度も書かなくていいしCSSの構成が分かりやすい、のが利点かな。

リスト5.13を手作業で変換してみることは、良い演習になります。変換後にもCSSが適切に動作していることを確認してみましょう。

やっときましょうか。

元々の内容からコピペを繰り返して下記の内容に変更。

app/assets/stylesheets/custom.css.scss

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
  a {
    color: #555;
    &:hover {
      color: #222;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

サーバー起動。

$ rails server -b $IP -p $PORT

レイアウト崩れはないのでちゃんとCSS作れてるよう。

今日はここまで。解説を読むのがメインでした。
今日の作業時間は【20分】。

次は「5.2.2 素晴らしい構文を備えたスタイルシート」の「変数」から。