1

在生成的 application.html.erb 的默认布局中，这本书添加了这行代码，因为 rails 一次加载所有样式表，我们需要一个约定来将特定于控制器的规则限制在与该控制器关联的页面中。使用 controller_name 作为类名是一种简单的方法。他们添加了以下代码：

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

但我还是不明白它在做什么？有人可以解释一下吗？实际上，这是否是常见且推荐的事情？

4

4 回答 4

1

这基本上class是将主体的设置为当前控制器名称。因此，如果您有一个在多个控制器之间共享的布局，则根据当前活动的控制器，您将拥有不同的 body 类。这使您可以根据控制器确定 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类名在两者之间是通用的，但是因为您的范围仅限于控制器，所以它们不会在浏览器中竞争。

您可以通过这种方式确定所有 CSS 样式的范围，并且几乎可以为您的 CSS 样式提供一个命名空间，以防不同控制器之间的类名冲突。由于你的 CSS 都是从资产管道连接在一起的，如果你有竞争的类名，这很容易导致渲染问题。这有助于缓解这种情况。

于 2013-01-20T16:04:52.697 回答
1

这是一种基于控制器确定 CSS 范围的方法。

假设您有 2 个模型：Car和Brand，并且您希望顶部菜单在显示所有汽车的页面上显示为绿色，在显示品牌的页面上显示为红色。

在列出所有汽车的页面（汽车#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 类。这在通过 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

最好将 action_name 添加到 body 类

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

You may scope not only CSS but also Javascript to controller or action. (becauses .js files as well as .css are merged together by assets pipeline)

CoffeeScript example:

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

SASS example:

.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 回答