stylesheet_link_tagを考える

Rails3

印刷したとき用のデザインというか、不要な部分を削除することから始まって悩み始めたのでメモめも

ふつうのHTML+CSSな構成

CSSで特定の部分を印刷しない設定にするには

@media print{
#test {
    display:none;
    }
}

普通のHTMLだったらこんな感じ。
その延長でapp/assets/stylesheets/mail.css.scssに上記を書き込んでみたら変化がない。

RailsでのCSSの指定

すごくアバウトにみていた。
app/assets/stylesheets/application.cssを編集したことがない。
app/assets/stylesheets/main.css.scssを編集したり、同じ階層のcalendar.css.scssを編集したりしている。
railsはどこでcssを指定するのか？

このうち、require_tree .がapp/assets/stylesheets以下の全CSSファイルを読み込む部分になります。

全部！ということなら納得した。生成されたlinkタグを見るとmediaはこんな感じになる。

link href="/assets/main.css?body=1" rel="stylesheet" type="text/css" media="screen"

ならば、screen.cssとprint.cssを作ってみる。

  <%= stylesheet_link_tag    "application" %>
  <%= stylesheet_link_tag "screen", :media=>"all" %>
  <%= stylesheet_link_tag "print", :media=>"print" %>

残念なことに、applicationで全部読み込まれるのでprintもmedia="screen"になる。そうじゃないんだ、、、

media printを上手に管理したい

Rails の個別スタイルシート呼び出しをもうちょっといい感じにする
hoge/print.cssと入れ子にしたけど読み込む。

asset pipeline のちょっとしたまとめ( require とか優先読込)

サブディレクトリを読み込まない
application.css の中で require_tree . が使われているところを、require_directory . にすると、同じディレクトリ内のファイルだけがコンパイルされます。

なるほど！！これだ！！

今回のまとめ

application.cssを編集する

app/assets/stylesheets/application.css
下記の行を見つける

*= require_tree .

書き換えるとサブディレクトリのCSSファイルは読み込まなくなる。

*= require_directory .

印刷用CSSファイルを作る

app/assets/stylesheets/print/print.css

nav{display:none;}

印刷するときの動作を書く

スタイルシートの読み込みを変える

app/views/layouts/application.html.erb

  <%= stylesheet_link_tag    "application", :media=>"all" %>
  <%= stylesheet_link_tag "print/print", :media=>"print" %>

あとから印刷用のレイアウトを考えるときなら、こんな感じがらくだと思う。