Rails 中的 body 元素样式答案

【问题标题】：Styling body elements in RailsRails 中的 body 元素样式
【发布时间】：2014-09-12 04:26:16
【问题描述】：

我目前正在 Rails 中开发一个简单的博客应用程序。我使用了两种不同的布局，一种用于我的文章页面 (application.html.erb)，另一种用于我的静态页面 (welcome.html.erb)，例如主页等。

欢迎布局需要以下样式：

body {
  padding-top: 50px;
  padding-bottom: 20px;
}

这些特殊的属性会扰乱使用文章布局的其他页面。

1.对于出现在不同布局/页面中的相同类型元素需要不同样式的这种情况，是否有解决方法？

2. 拥有特定于控制器的样式表有什么意义，例如welcome.css.scss 和article.css.scss，如果它们都编译到一个application.css 文件中？

我正在尝试更好地了解 Rails 资产管道。我正在使用 rails 4.1.1 和 ruby 2.1.1p76

非常感谢

【问题讨论】：

为什么不能在添加样式的欢迎布局中的 body 上放置一个类？
是的，谢谢，我认为可以。

标签： html css ruby-on-rails asset-pipeline

【解决方案1】：

如果你查看你的布局，你会得到一个 <%= stylesheet_link_tag "application", media: "all" %> 它基本上告诉 Rails 从 application.css 加载样式，现在如果你查看你的 application.css，你会得到 *= require_tree . 它会加载 app/assets/stylesheets 中存在的所有样式表，因此您的样式适用于两种布局。

修复

由于您使用单独的布局，因此最简单的解决方案将是在您的布局中使用不同的类或 id（因为它在页面中将是唯一的，正如 @MrYoshiji 指出的那样）

body#home{//styles for home layout}

body#welcome{//styles for welcome layout}

【讨论】：

当 HTML 页面中只能有一个 <body> 标签时，在正文上使用 HTML class 是没有意义的。 HTML id 在这里更合适
@MrYoshiji 类也可以使用，但使用 id 会很有意义，因为它是唯一的。谢谢！

【解决方案2】：

Rails layouts per action?
因为作为开发人员，您更容易知道这些样式指的是什么。你经常会这样做：

one.html.erb

<div id="one">
  <!-- code -->
</div>

one.css.scss

#one {
  // styling
}

这样one.css.scss 中的样式只会应用于正确的 html 页面。

【讨论】：