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

Question

我正在使用 Rails 3.1.rc5 构建我的第一个单独的 Rails 应用程序。我的问题是我想让我的网站有条件地渲染各种 CSS 文件。我正在使用 Blueprint CSS，并且我尝试让 sprockets/rails 大部分时间渲染 screen.css，仅在打印时渲染 print.css，并且 仅当从 Internet Explorer 访问站点时才使用 ie.css。

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

在 application.css 中：

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

在我的样式表部分（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"

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

谢谢！

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/development.rb 中：

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

更新：

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

1. 移动图像以遵循相同的模式
   • 请注意，这仅在图像未全部共享的情况下才有效
   • 我预计这对大多数人来说都是不可能的，因为它使事情变得过于复杂
2. 限定图像路径：
   • 背景：url('/assets/image.png');
3. 使用 SASS 助手：
   • 背景：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< /a>