Question

我正在使用Rails 3.1.rc5构建我的第一个独立Rails应用程序。我的问题是我希望我的网站有条件地呈现各种CSS文件。我正在使用Blueprint CSS，我试图让sprockets / rails在大多数情况下呈现screen.css，仅在打印时print.css呈现，ie.css仅在从Internet访问网站时呈现*= require_tree资源管理器。

不幸的是，application.css清单中的默认assets/stylesheets命令包含*= require_self *= require home.css ... *= require blueprint/screen.css目录中的所有内容，导致令人不快的CSS混乱。我目前的解决方法是一种蛮力方法，我单独指定所有内容：

在application.css中：

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

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

{{1}}

这可行，但它并不是特别漂亮。我已经做了几个小时的搜索，甚至到目前为止，但我希望有一些更简单的方法，我刚刚错过了。如果我甚至可以选择性地渲染某些目录（不包括子目录），那么整个过程就会变得不那么严格了。

谢谢！

Answer 1

我发现了一种方法，通过使用资产管道但将样式表分组，使其不那么严格和未来证明。它并不比您的解决方案简单得多，但是这个解决方案允许您自动添加新的样式表，而无需再次重新编辑整个结构。

您要做的是使用单独的清单文件来解决问题。首先，您必须重新整理app/assets/stylesheets文件夹：

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]-->

最后，不要忘记在config / environments / production.rb中包含这些新的清单文件：

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

更新

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

移动图片以遵循相同的模式
- 请注意，这仅适用于图片未全部共享的情况
- 我希望这对大多数人来说都不是首发，因为它太复杂了
限定图片路径：
- background: url('/assets/image.png');
使用SASS助手：
- background: image-url('image.png');

Answer 2

今天遇到了这个问题。

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

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

在你的布局中，有条件地包含那些清单文件，你很高兴！

Answer 3

这是一个非常巧妙的方法。我在html或modernizr上使用条件类。请参阅此文章，以获得有关内容的良好表示。 modernizr-vs-conditional-classes-on-html

使用Rails 3.1资产管道有条件地使用某些css

3 个答案: