rails 3中的控制器特定样式表：Inheritence [英] Controller specific stylesheets in rails 3: Inheritence

问题描述

首先，我是rails的新手。我在rails网站上工作。它有三个控制器
application_controller，static_pages_controllers和users_controller 。他们都在app / assets / stylesheets / （application.css和users.css.scss）
中除了static_pages_controllers之外还有自定义的css（scss）文件。 css.scss for overall layout or common elements 。我使用了控制器特定的样式表，如上所述
这里

Firstly,I'm a newbie to rails.I'm working on a rails website. It has three controllers namely application_controller,static_pages_controllers and users_controller. They all have their respective css (scss) files in app/assets/stylesheets/ (application.css and users.css.scss) except static_pages_controllers and also has a custom.css.scss for overall layout or common elements.I used controller specific stylesheets as mentioned here

我的问题是：

1）custom.css中的css规则适用于所有控制器视图除非那些我在单独的控制器css中明确定义的。

1) does the css rules in custom.css apply to all the controllers views except for those I have defined explicitly in seperate controller css?

2）如果是，那么我在custom.css.scss和users.css中定义一个规则。 scss

2) if yes,then I have a rule defined in both custom.css.scss and users.css.scss

custom.css.scss - body {background-color：color1;}

custom.css.scss - body { background-color:color1;}

users.css.scss - body {background-color：color2;}

users.css.scss - body { background-color:color2;}

但静态视图在static_pages_controllers和users_controllers背景color2。我在哪里错了？只有users_controller中的视图必须显示color2，而static_pages_controller必须显示color1。

but still views in both static_pages_controllers and users_controllers show background color2. where am I going wrong? only views in users_controller must show color2 and static_pages_controller must show color1.

推荐答案

关于如何使用资产管道的rails指南在这里不能完全说明真相。它说：

The Rails guide on how to use the asset pipeline doesn't quite tell the whole truth here. It says:

您应该将任何JavaScript或CSS独特的控制器放在各自的资产文件中，因为这些文件可以只加载这些控制器包含<％= javascript_include_tag params [：controller]％>或<％= stylesheet_link_tag params [：controller]％>。

You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.

现在， 可以 按照他们的建议，为每个控制器加载特定的样式表，但它不会像他们建议的那样工作。

Now, you could do as they suggest and load specific stylesheets for each controller, but it does not work as they suggest out of the box. The neglect to mention a few things you must do.

1. 您需要删除 // = require_tree。指令从 application.css ，它留在原地，将加载文件夹中的每个其他资产。这意味着每个页面都会加载 users.css ，如果您在示例中添加了特定于控制器的样式表行，则会加载控制器样式表两次。

1. You need to remove the //= require_tree . directive from application.css, which, left in place, will load every other asset in the folder. This means that every page would load users.css, and if you added the controller-specific stylesheet line as in their example, it would load the controller stylesheet twice.

您需要告诉Rails预编译各个文件。默认情况下，预编译器忽略除了 application.css 之外的所有* .css文件。要解决这个问题，你必须编辑你的配置，做这样的事情：

You would need to tell Rails to precompile the individual files. By default, all *.css files besides application.css are ignored by the precompiler. To fix this you'd have to do edit your config to do something like this:

# in environments/production.rb
# either render all individual css files:
config.assets.precompile << "*.css"
# or include them individually
config.assets.precompile += %w( users.css static_pages.css )

最后，根据Rails指南的指示，您需要更改样式表包含以下内容：

Finally, as instructed by the Rails guide, you'd need to change your stylesheet includes to look something like:

<%# this would now only load application.css, not the whole tree %>
<%= stylesheet_link_tag :application, :media => "all" %>

<%# and this would load the controller specific file %>
<%= stylesheet_link_tag params[:controller] %>

---

但是， 上述可能不是真正的最佳做法。当然，有时你可能需要单独的样式表，但大多数时候你可能只是想提供你的样式包，以便客户端可以缓存一个文件。

---

However, the above may not be truly the best practice. Sure, sometimes you might want individual stylesheets, but most the time you probably just want to serve your style bundle so the client can cache one file. This is how the asset pipeline works out of the box, after all.

除此之外，如果你只是在控制器的特定样式表中添加覆盖规则，重新创建一个特定于装载顺序的风格。

Besides that, if you were to just add override rules in your controller specific stylesheets, then you're creating a load-order-specific tangle of styles right out of the gate. This... is probably not good.

更好的方法可能是在控制器表中命名空间的样式，如下所示：

A better approach might be to namespace the styles in the controller sheets, something like this:

// in application.css (or some other commonly loaded file)
background-color: $color1;

// in users.css.scss
body.controller-users {
  background-color: $color2;
}

// and so on...

然后在你的布局中，添加控制器名到body类，例如：

Then in your layout, add the controller name to the body class, like:

<body class="controller-<%= params[:controller] %>">

这样，你的样式就可以通过命名空间来解析，而不只是加载顺序。此外，使用此解决方案，您仍然可以继续，如果您愿意，可以加载单独的控制器特定的样式表，或者您可以忘记这一点，只是让一切都编译到 application.css 默认情况下。将为每个页面加载所有样式，但只应用控制器特定的样式。

In this way, your styles are resolved by namespace, not just load order. Furthermore with this solution you could still go ahead and load separate controller-specific stylesheets if you desire, or you could forget about that and just let everything be compiled into application.css as it would be by default. All the styles would be loaded for each page, but only the controller-specific styles would apply.

这篇关于rails 3中的控制器特定样式表：Inheritence的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！