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

Question

我正在使用Rails 3.1.rc5构建我的第一个独立Rails应用程序.我的问题是我希望我的网站有条件地呈现各种CSS文件.我正在使用Blueprint CSS,我试图在screen.css大多数情况下渲染sprockets/rails ,print.css只有在打印时,并且ie.css只有从Internet Explorer访问该站点时.

不幸的是,清单中的默认*= require_tree命令application.css包含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/production.rb中包含这些新的清单文件:

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

更新:

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

1. 移动图像以遵循相同的模式
   • 请注意,这仅适用于图像未全部共享的情况
   • 我认为这对大多数人来说都不会起作用,因为它太复杂了
2. 限定图像路径:
   • background: url('/assets/image.png');
3. 使用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"]

在你的布局中,有条件地包括那些清单文件,你很高兴!