23

Rails 3.1 の新しいアセット パイプラインを学習しているところです。私が抱えている特定の問題の 1 つは、Sprockets が見つかったすべての CSS スタイルシートを 1 つの巨大なスタイルシートにマッシュアップする方法にあります。これが、手動でスタイルシートをマージして本番用に縮小するよりも有利である理由を理解しています。しかし、私は、すべてのルールを一緒にマッシュアップするのではなく、スタイルシートを選択的にカスケードできるようにしたいと考えています。たとえば、私は欲しい：

マスター.css

Railsアプリのすべてのページで読み込まれるようにしたいのですが、

admin.css は、管理セクション/名前空間内のページ/ビューによってのみ読み込まれます。

Rails 3.1 がスタイルシートを組み合わせてプロダクション用に縮小する優れた方法を利用するにはどうすればよいでしょうか。また、レイアウトごとに特定のスタイルシートの組み合わせのみをロードできるという以前の柔軟性も備えていますか?

または、レイアウトのボディタグにクラスを追加してこれを行う必要があります-

本体クラス="管理者"

そして、必要に応じてスタイル ルールをターゲットにします。SASS スコープのセレクターを使用すると、これは合理的な解決策になる可能性があります。

4

5 に答える 5

8

これは私がスタイリングの問題を解決した方法です: (Hamlを許してください)

%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
    = yield

このようにして、すべてのページ固有の.css.sassファイルを次のように開始します。

#post
  /* Controller specific code here */
  &#index
    /* View specific code here */
  &#new
  &#edit
  &#show

これにより、衝突を簡単に回避できます。

これがいくつかの助けになることを願っています。

于 2011-05-29T15:52:13.663 に答える
2

私のウェブサイトにこれに関する投稿があります: Leveraging Rails 3.1, SCSS, and the assets pipeline to difference your stylesheets

また、別の質問に対するこの回答を確認してください: Rails 3.1 アセット パイプラインを使用して特定の css を条件付きで使用する

お役に立てれば。

よろしく、ラッセ

于 2011-09-04T14:58:20.623 に答える
1

@nathanvda：確かに...

複数のレイアウトファイルを利用しています。したがって、app / views / layoutsでは、application.html.haml（HAMLを使用）だけでなく、実際にはアプリケーションレイアウトを無視し、3つのカスタムレイアウトを使用します。

admin.html.haml（管理セクションビューのみ）

registered.html.haml（ユーザービューのみに登録/サインイン）

unregistered.html.haml（ユーザービューでのみ未登録/未署名）

したがって、admin.html.hamlファイルの上部に、別のadmin.scss（SCSSを使用）マニフェストへのスタイルシートリンクタグがあります。そのマニフェストは、管理セクションのためだけに必要なサブスタイルシートをロードします。これにより、一般的なスタイルを使用しながら、管理セクション専用のルールを指定できます。たとえば、サイト全体でjquery-uiを使用しているため、jquery-uiに関連付けられたスタイルは独自のスタイルシートに配置され、3つのcssマニフェストファイルすべてのマニフェストに含まれます。

このソリューションでは、キャッシュできる単一のCSSファイルは提供されませんが、最終的には3つのCSSファイルが提供され、それぞれをキャッシュできます。これにより、CSSルールを編成する際のパフォーマンスとある程度の柔軟性の間のトレードオフが可能になるため、CSSルールの衝突について心配する必要はありません。

于 2011-08-25T11:30:43.473 に答える
0

私がこれまで行ってきた方法は、a/ と u/ の 2 つの別個のフォルダーを用意することです。ここで、a/ は管理ビュー用で、u/ はユーザー ビュー用です。次に、レイアウトで、適切な application.css を assets/u/application.css(js) で指定します。自動生成されたファイルを毎回移動する必要があるのは少し面倒ですが、マニフェストで各ファイルを個別に要求する必要がある場合よりもはるかに少なくなります。

于 2011-05-24T13:24:12.943 に答える
0

私は次のようなものを使用します

application.html.erb ">

show.html.erb

content_for :body_id do page_specific_body_id end

于 2011-06-28T17:00:00.277 に答える