1

ブックが生成する application.html.erb のデフォルト レイアウトに、このコード行を追加しました。レールは一度にすべてのスタイルシートをロードするため、コントローラー固有のルールをそのコントローラーに関連付けられたページに制限する規則が必要であると述べています。controller_name をクラス名として使用するのは簡単な方法です..そして、彼らはこのコードを追加しました:

<body class = '<%= controller.controller_name %>' >

しかし、まだ私はそれが何をしているのか理解していませんか？誰かがそれを説明できますか？実際、それは一般的で推奨されることですか？

4

4 に答える 4

1

これは基本的classに本体の を現在のコントローラー名に設定しています。そのため、複数のコントローラー間で共有されているレイアウトがある場合、現在アクティブなコントローラーに応じて、ボディのクラスが異なります。これにより、コントローラーに応じて CSS のスコープを設定できます。たとえば、SCSS では次のようになります。

body.auth {
    background-color: red;
    .row {
        font-size: 12pt;
    }
}

body.post {
    background-color: green;
    .row {
        font-size: 10pt;
    }
}

これにより、いずれかのAuthControllerアクションにいるとき、サイトの背景色が になりますred。の場合はPostControllerになりますgreen。rowクラス名は 2 つの間で共通ですが、コントローラーにスコープが設定されているため、ブラウザーで競合しないことに注意してください。

この方法ですべての CSS スタイルのスコープを設定でき、さまざまなコントローラー間でクラス名の競合が発生する可能性がある場合に備えて、CSS スタイルにほとんど名前空間を与えるのに役立ちます。CSS はアセット パイプラインからすべて結合されているため、競合するクラス名があるとレンダリングの問題が発生しやすくなります。これはそれを軽減するのに役立ちます。

于 2013-01-20T16:04:52.697 に答える
1

これは、コントローラーに基づいて CSS のスコープを設定する方法です。

と の 2 つのモデルがCarありBrand、すべての車を表示するページではトップ メニューを緑にし、ブランドを表示するページではトップ メニューを赤にしたいとします。

すべての車を一覧表示するページ (cars#index) では、本文は次のようになります。

<body class="cars">

すべてのブランドを一覧表示するページ (brands#index) では、本文は次のようになります。

<body class="brands">

したがって、次のように css を記述できます。

.cars .menu {
    background: green;
}

.brands .menu {
    background: red;
}
于 2013-01-20T16:05:43.127 に答える
1

コントローラー名と同じ名前の CSS クラスを body に追加しています。これは、CSS を介して特定のコントローラーをターゲットにして、そのコントローラーのすべてのアクションにカスタム スタイルを追加する場合に便利です。したがって、管理セクション用の AdminController があり、ページの背景を変更して、他のユーザーが表示するセクションとは対照的に、管理セクションにいることがわかるようにするとします。

body.admin {
  background-color: gray;
}

同様のことを達成するために私が見た別の規則は、現在のコントローラーの名前で CSS ファイルをロードすることです。

http://shaunchapman.me/post/446260774/rails-tip-automatically-link-a-controllers-stylesheet

何が起こっているのかを理解している限り、どちらの方法でも問題ないと思います。

于 2013-01-20T16:06:51.407 に答える
1

body クラスに action_name も追加することをお勧めします。

<body class='<%= "#{controller_name} #{action_name} %>'

CSS だけでなく Javascript もコントローラーまたはアクションにスコープすることができます。(.css だけでなく .js ファイルもアセット パイプラインによってマージされるため)

CoffeeScript の例:

$(document).ready ->
  if $('body').hasClass('cars')
    //..code for cars only controller

SASS の例:

.cars {
  .menu { background-color:blue; } # cars controller specific css
  &.new {
    .menu { background-color:red; } # cars' action new specific css
  }
}
于 2013-01-20T16:24:13.303 に答える