使用Rails3.1资产管道有条件地使用某些css

我正在使用Rails 3.1.rc5构建我的第一个solo Rails应用程序。我的问题是，我想让我的网站有条件地呈现各种CSS文件。我正在使用Blueprint CSS，我正在尝试让链轮/轨道在大多数情况下呈现

screen.CSS

，

print.CSS

仅在打印时呈现，而

ie.CSS

仅在从Internet Explorer访问站点时呈现

不幸的是，

应用程序中的默认
*=require_tree
命令。css

清单包含

资产/样式表

目录中的所有内容，并导致令人不快的css混乱。我目前的解决方法是一种蛮力方法，其中我单独指定了所有内容：

在application.css中：

*= require_self
*= require home.css
...
*= require blueprint/screen.css

在我的部分样式表（haml）中：

=样式表\链接\标记“应用程序”
=样式表\链接\标记“蓝图/打印”，媒体：“打印”
=javascript_include_标记“应用程序”

这很管用，但并不特别漂亮。我已经做了几个小时的搜索，甚至可以走到这一步，但我希望有一些更简单的方法来做这件事，我刚刚错过了。如果我甚至可以有选择地呈现某些目录（不包括子目录），那么整个过程就不会那么僵硬了

---

谢谢

我发现了一种方法，通过仍然使用资产管道，但对样式表进行分组，使其不那么僵化，也不那么经得起未来的考验。它并不比您的解决方案简单多少，但此解决方案允许您自动添加新样式表，而无需再次重新编辑整个结构

您要做的是使用单独的清单文件来分解内容。首先，您必须重新组织您的

应用程序/资产/样式表

文件夹：

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

然后编辑三个清单文件：

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

接下来更新应用程序布局文件：

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

更新：

正如Max指出的，如果你遵循这个结构，你必须注意图像引用。您有几个选择：

移动图像以遵循相同的模式

• 请注意，这仅在图像未全部共享时有效
• 我认为这对大多数人来说都是不可能的，因为它使事情变得太复杂了

限定图像路径：

• background:url（'/assets/image.png'）

使用SASS帮助程序：

• background:image-url（'image.png'）

---

这是一个很好的方法。我在html或Modernizer上使用条件类。关于what do what，请参阅本文。

---

今天遇到了这个问题

最终将所有特定于IE的样式表放入lib/assets/stylesheets中，并为每个版本的IE创建一个清单文件。然后在application.rb中将它们添加到要预编译的内容列表中：

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

---

在您的布局中，有条件地包含这些清单文件，您就可以开始了

虽然这是一个很好的文件组织，但我相信它仍然以与问题本身相同的方式解决了基本问题。@semperos，你是对的，解决方案的形状基本相同，但我的建议仍然允许我们在整个样式表中使用资产管道。我不确定是否有其他方法可以选择性地包含部分样式，除非它位于单独的样式表中。至少通过这种方式，我们只编译为少数CSS文件。实际上，在Rails资产管道指南中这样做会很好。谢谢，这是一个难题：如果你遵循这个结构，使用简单的

.css

文件，那么你所有的图像都会被破坏。例如，

background:url（'image.png'）

将被转换为路径

/assets/all/image.png

（注意路径中的all）。取而代之的是：

background:url（'/assets/image.png）

。如果有更简单的解决方法，请发布。除了使用SASS之外，SASS具有可能正确解析路径的helpers方法。@ExiRe，yes。任何不遵循标准模式的样式表或JS文件/清单都需要添加到预编译数组中（请参阅：）

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]