###アセット（assets）とは
railsのapp/assetsディレクトリにはimages、javascripts、stylesheetsの3つのディレクトリがあります。
それぞれ画像ファイル、javascriptファイル、cssファイルを置くためのディレクトリです。
これらの事を**アセット(assets)**と呼びます。
###アセットパイプラインとは
アセットパイプラインはstylesheetsディレクトリ以下の複数のファイルを１つに結合し、1個のcssファイルを生成する事をいいます。アセットパイプラインの最大の特徴はファイルの変換と結合です。
###sassとは
SassとはCSSを拡張したスタイルシート言語のことです。
ブラウザではSassを理解できないため、サーバー側でsassをcssに変換してやる必要があります。この処理の事をコンパイルと呼びます。よく使用される拡張子.scssはsassの一種です。scssはapp/assets/stylesheetsに配置します。
###なぜファイルを結合する必要があるのか
なぜ複数のファイルを結合するかというと、ブラウザとサーバー側のHTTP通信の回数を減らすためです。これによってサーバーへの負荷を減らすことができます。
###アセットパイプラインの利用方法
stylesheetsディレクトリのapplication.cssを開くと以下の記述があると思います。
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
まずはこれらを解説していきます。
コメント中の*はディレクティブと呼ばれ、アセットパイプラインの設定を行なっています。
*= require_tree .
はアセットパイプラインが処理するファイルの設定範囲を設定しています。.(ドット)はstylesheetsディレクトリ以下の全ファイルを処理対象として指定しています。
ここを対象のディレクトリにしたい場合は
*= require_tree ./対象のディレクトリ名
とします。
*= require_self
次に*= require_selfですが、これはself＝自分自身、つまりはapplication.css自身をアセットパイプラインの処理対象とする事を宣言しています。
###スタイルシートを目的別に分ける方法
まずstylesheetディレクトリにadmin.cssを作成します。
*
*= require_tree ./admin
*/
/config/initializers/assets.rbに以下を記述します。
Rails.application_config.assets.precompile += %w( admin.css)
これによりadmin.cssがプリコンパイルの対象に加わります。
次にstylesheetsディレクトリにadminディレクトリを作成し、layout.scssを作成しスタイルを記述します。
続いてviews/lauouts/application.html.erbをadmin.cssに変更します。
sample_app/app/views/layouts/admin.erb
<!DOCTYPE html>
<html>
<head>
<title><% title_helper %></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
link_tagをadminに変更しています。
/application.controller
layout :set_layout
private def set_layout
if params[:controller].match(%r{\A(admin)/})
Regexp.last_match[1]
else
"customer"
end
end
上記によりset_layoutメソッドはadminという文字列を返します。この文字列がレイアウトとして使用されます。あとはこれを繰り返すことで利用別ごとにスタイルシートを作成できます。