【发布时间】：2012-12-01 08:51:03
【问题描述】：
我想在我的 Rails 应用程序中为不同的页面制作不同的布局，但是如果我在资产文件夹中为特定页面创建不同的文件，那么它会从不同的页面获取一些值，而从不同的文件中获取一些值。我对此很生气。我为此制作了一个不同的布局文件，并将这个layout'home' 包含在每个控制器中（主页的主页）。
请帮忙。
【问题讨论】：
标签： css ruby-on-rails twitter-bootstrap
【发布时间】：2012-12-01 08:51:03
【问题描述】：
我找到了答案。实际上这不是一个好的做法，除非并且直到您想要在您的 Web 应用程序中使用与其他页面完全不同的视图的不同页面。您需要做的事情如下：
假设我想要一个完全不同的控制台页面布局。下面是步骤
- 在 layouts 文件夹中创建一个布局
console.html.erb。 - 将此行
<%= stylesheet_link_tag "application", :media => "all" %>更改为<%= stylesheet_link_tag "console_layout", :media => "all" %>。 - 如果您想包含不同的 javascript，还可以更改
javascript_include_tag行。 - 转到
assets/stylesheets。 - 在该文件夹中创建一个文件
console_layout.css.scss，如果要为该特定页面添加任何样式表，请包含任何样式表。假设我想为此控制台页面包含bootstrap_and_overrides.less文件。像这样写 /* *= require 'bootstrap_and_overrides' *= require 'console' */最后从 application.css 中删除
self_tree .。
这样做意味着您实际上是在为该控制台页面创建不同的布局、不同的样式表。创建它之后，它将永远不会从其他样式表中获取值。 我想提一下，仅当您需要创建一个样式完全不同且与其他页面样式无关的页面时才这样做。
谢谢。 :)
【讨论】：
要创建新的 CSS，您必须创建视图或控制器。
我不建议创建单独的文件。我建议你使用 rails 生成器。
例如，如果你想创建一个新视图，你必须这样写：
rails generate controller credit_cards open debit credit close
这会生成一个文件控制器credit_cards，视图debit credit 和close，资产credit_cards.scss 和javascript credit_cards.js.coffee，
在查看credit_cards/debit、credit_cards/credit 和credit_cards/close 时，您的credit_cards.scss 文件优于其他scss 文件。
您必须手动创建布局并将其添加到您的控制器或控制器内的操作：
layout "name_layout"
或在每个动作中：
respond_to do |format|
format.html { render :layout => 'name_layout' }
end
到特定的.carousel：
在你的view.html.erb
<div class="credit_card">
<div class="carousel">
content here..........
</div>
</div>
在你的file.scss
.credit_card > .carousel { margin-bottom:0px; width: 10px;}
最好的问候！
【讨论】：
-
是的，我为每个页面的每个 n 使用了 rails 生成器。但问题是我的 home.css.scss 正在从 gallery.css.scss 中获取一些值。尽管每个页面都有不同的布局。
-
例如我有这个 .carousel { margin-bottom: 0px;边距顶部：0px； } 我的主页。现在对于我的画廊页面，我想要这段 css，但有一些变化，比如 margin-top: 20px;但它不是那样工作的。它只取主页的值。
-
您可以创建一个覆盖
carousel类的新div，并为该div 提供特定的样式轮播。我已经编辑了我的回复 -
我也这样做了。但每当我创建一个新页面并复制相同但进行不同更改时，它都会从不同的 css 文件中获取值。这是我们创建新 div 的唯一解决方案吗？我想知道我们可以在布局文件中进行一些更改。我已将相同的 application.html.erb 复制到所有画廊和家庭布局文件中。对吗？
-
您可以将 div 添加到视图或布局中。效果是一样的！
我认为有这样一行：
*= require_self
在您的application.css 文件中存在于assets/stylesheets 中。
这些线被链轮用于资产管道内衬。您可以避免要求所有文件并明确声明您需要的文件。
同样在你的app/views/layouts/application.html.erb，你有这行。
'全部' %>
我宁愿不碰它，而是为其中的特定视图声明特定样式表。
详细了解资产管道以及它如何有助于加快您的应用程序。这是一本很棒的书。
旁注：我不确定您是否希望同一班级有不同的风格。感觉您正在尝试做从长远来看难以维护的事情。我宁愿添加一个新课程。而不是使用现有的类，而是使用新的类。命名约定可能与控制器名称或视图名称有关。
【讨论】：
-
嘿，非常感谢。但是我已经找到了一个解决方案。我没有更新答案。我一定会的。谢谢顺便说一句。
我觉得你很困惑。如果 *= require_tree . 在 application.css 清单文件中，则每个控制器生成的 css 文件（以及所有其他文件）都将包含在每个请求中。我建议您的每个布局文件都可能在 div 上具有唯一的 id，可能是控制器名称。然后，在每个控制器的 sass 文件中，使用 id，您将不再有冲突的 css。
例子
div#homeController.container
color:red
【讨论】：