如何在 Rails 3.1 中管理 CSS 样式表资源？
我刚刚学习 Rails 3.1 中的新资产管道。我遇到的一个特殊问题是 Sprockets 将所有找到的 CSS 样式表混合成一个庞大的样式表的方式。我明白为什么这比手动合并样式表和缩小生产更有优势。但我希望能够有选择地级联样式表，而不是将所有规则都混在一起。例如，我希望：
master.css
由 Rails 应用程序中的所有页面加载，但我希望
admin.css 仅由管理部分/命名空间内的页面/视图加载。
我怎样才能利用 Rails 3.1 组合样式表并缩小它们以进行生产的好方法，同时又具有以前能够在每个布局中仅加载某些样式表组合的灵活性？
或者应该通过在布局中向正文标记添加一个类来完成 -
body class="admin"
然后根据需要定位样式规则。使用 SASS 范围选择器这可能是一个合理的解决方案。
I'm just learning the new asset pipeline in Rails 3.1. One particular problem I'm having is with the way Sprockets just mashes all the found CSS stylesheets into one massive stylesheet. I understand why this is advantageous over manually merging stylesheets and minifying for production. But I want to be able to selectively cascade stylesheets instead of having all rules all mashed together. For instance, I want:
master.css
to be loaded by all pages in the Rails app, but I want
admin.css only to be loaded by pages/views within the admin section/namespace.
How can I take advantage of the great way that Rails 3.1 combines stylesheets and minifies them for production, but also have the former flexibility of being able to load only certain stylesheet combinations per layout?
Or should this be done by adding a class to body tags in layouts-
body class="admin"
And then target style rules as appropriate. Using SASS scoped selectors this might be a reasonable solution.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这就是我解决样式问题的方法：（请原谅 Haml）
这样我就可以使用以下方式启动所有页面特定的 .css.sass 文件：
这样您就可以轻松避免任何冲突。
希望这对一些人有帮助。
This is how i solved the styling issue: (excuse the Haml)
This way i start all the page specific .css.sass files with:
This way you can easily avoid any clashes.
Hope this helped some.
我的网站上有一篇关于此的帖子：
利用 Rails 3.1、SCSS ，以及用于区分样式表的资产管道
并查看另一个问题的答案：使用 Rails 3.1 资产管道有条件地使用某些CSS
希望这有帮助。
此致，
拉塞
I have a post about this on my website:
Leveraging Rails 3.1, SCSS, and the assets pipeline to differentiate your stylesheets
And check out this answer to another question: Using Rails 3.1 assets pipeline to conditionally use certain css
Hope this helps.
Best regards,
Lasse
@nathanvda：当然......
我们使用多个布局文件。因此，在我们的 app/views/layouts 中，我们实际上忽略了应用程序布局并使用 3 个自定义布局，而不是只有 application.html.haml（我们使用 HAML）：
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 规则冲突。
@nathanvda: sure...
We make use of multiple layout files. So in our app/views/layouts, instead of having just application.html.haml (we use HAML), we actually ignore the application layout and use 3 custom layouts:
admin.html.haml (admin section views only)
registered.html.haml (registered/signed in users views only)
unregistered.html.haml (unregistered/unsigned in users views only)
So at the top of my admin.html.haml file I will have my stylesheet link tags to a separate admin.scss (we use SCSS) manifest. That manifest will load any necessary sub-stylesheets just for the admin section. This allows us to specify rules just for the admin section while also making use of common styles. For instance, we use jquery-ui throughout the site, so the styles associated with jquery-ui sit in their own stylesheet and we include them in the manifests for all 3 css manifest files.
This solution doesn't give you a single CSS file that can be cached, but it ends up giving you 3 CSS files, each of which can be cached. This allows a tradeoff between performance and some flexibility in organizing CSS rules so we don't have to worry about CSS rule collisions.
到目前为止，我所做的方法是有两个单独的文件夹 a/ 和 u/，其中 a/ 用于管理视图，u/ 用于用户视图。然后在布局中，我使用 asset/u/application.css(js) 指向相应的 application.css。每次都必须移动自动生成的文件，这有点痛苦，但比必须在清单中单独要求每个文件要少得多。
The way I've been doing it so far is to have two seperate folders a/ and u/ where a/ is for the admin view and u/ is for the user view. Then in the layout I point to the appropriate application.css with assets/u/application.css(js). Bit of a pain having to move the auto generated files each time but a lot less than having to require each file individually in the manifest.
我使用类似
application.html.erb 的东西
">
show.html.erb
content_for :body_id 做
页面特定主体 ID
结尾
I use something like
application.html.erb
">
show.html.erb
content_for :body_id do
page_specific_body_id
end