使用Rails 3.1资产pipe道来有条件地使用某些CSS
我正在使用Rails 3.1.rc5构build我的第一个独奏Rails应用程序。 我的问题是，我想让我的网站有条件地呈现各种CSS文件。 我正在使用Blueprint CSS，我试图在大多数情况下使用sprockets / rails渲染screen.css ，仅在打印时使用screen.css ，而只有在从Internet Explorer访问站点时使用screen.css 。
不幸的是， application.css清单中的默认*= require_tree命令包含assets/stylesheets目录中的所有内容，并导致令人不快的CSS混乱。 我目前的解决方法是一种蛮力方法，我个人指定的一切：
在application.css中：
*= require_self *= require home.css ... *= require blueprint/screen.css
在我的样式表partial（haml）中：
<!--[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"
这工作，但不是特别漂亮。 我已经做了几个小时的search，甚至得到了这么多，但我希望有一些更简单的方法来做到这一点，我刚刚错过了。 如果我甚至可以有select地渲染特定的目录（不包括子目录），这将使整个过程僵化得多。
谢谢！
我发现了一种方法，通过仍然使用资产pipe道，但将样式表分组，从而使其变得不那么严格，并且能够保证未来的发展。 这不是比你的解决scheme简单多了，但是这个解决scheme允许你自动添加新的样式表，而不必重新编辑整个结构。
你想要做的是使用单独的清单文件分解。 首先你必须重新组织你的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 )
更新：
正如马克思指出的，如果你遵循这个结构，你必须注意图像引用。 你有几个select：
- 移动图像遵循相同的模式
- 请注意，这仅适用于图像未全部共享的情况
- 我认为这对大多数人来说都不是首发，因为这太复杂了
- 限定图像path：
-
background: url('/assets/image.png');
-
- 使用SASS帮手：
-
background: image-url('image.png');
-
今天遇到这个问题。
最终将所有IE特定的样式表放到lib / assets / stylesheets中，并为每个IE版本创build一个清单文件。 然后在application.rb中将它们添加到预编译的事物列表中：
config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]
在你的布局中，有条件地包含这些清单文件，你很好走！
这是一个相当干净的方式来做到这一点。 我在html或modernizr上使用条件类。 看到这篇文章是一个很好的代表什么是什么。 Modernizr的-VS-有条件类-ON-HTML
