Question

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

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

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

Answer 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类名称在两者之间是通用的，但由于您的范围是控制器，因此它们不会在浏览器中竞争。

您可以通过这种方式扩展所有CSS样式，如果您可能在不同控制器上发生类名冲突，则几乎可以为CSS样式指定命名空间。由于您的CSS都是从资产管道连接在一起的，如果您有竞争的类名，这很容易导致渲染问题。这有助于减轻这一点。

Answer 2

这是一种基于控制器来定位css的方法。

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

在列出所有车辆（汽车#index）的页面上，车身看起来像这样：

<body class="cars">

在列出所有品牌（品牌#index）的页面上，正文如下：

<body class="brands">

所以你可以像下面那样写你的css：

.cars .menu {
    background: green;
}

.brands .menu {
    background: red;
}

Answer 3

它正在向主体添加一个CSS类，其名称与控制器名称相同。当通过CSS定位特定控制器为该控制器上的所有操作添加自定义样式时，这非常有用。因此，假设您的管理员部分有一个AdminController，并且您希望页面背景不同，因此您知道自己位于“管理”部分，而不是其他用户将看到的部分。

body.admin {
  background-color: gray;
}

我见过的另一种类似的方法就是加载一个带有当前控制器名称的CSS文件：

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

我认为只要你了解正在发生的事情，两种方式都可以。

Answer 4

将action_name添加到body class

是个好主意

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

您不仅可以将CSS以及Javascript范围扩展到控制器或操作。（因为.js文件以及.css由资产管道合并在一起）

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
  }
}

无法理解一块Rails代码的原因

4 个答案: