我正在将我的应用程序迁移到Rails 3.1,并使用蓝图css框架。正如blueprint的github页面上的设置说明所示,要包含ie.css文件,需要满足一个条件。
在rails3.1中,我们将样式表文件(.css或.scs)放在app/assets/stylesheets中。Application.css包含以下两行重要内容:
/*
*= require_self
*= require_tree .
*/
它加载app/assets/stylesheets目录中的每个.css或.scs文件。这是设置说明告诉我们要做的:
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
如何"创建"3.1中那样的条件?
尝试使用三个独立的文件来要求所有相关的文件:
/*
* Application-Screen.css
*
*= require_self
*= require_tree ./screen
*/
/*
* Application-Print.css
*
*= require_self
*= require_tree ./print
*/
/*
* Application-IE.css
*
*= require_self
*= require_tree ./ie
*/
这棵树看起来像:
app/stylesheets/
+---screen/
| +--- Your actual stylesheets, along with Blueprint's
+---print/
| +--- Your print stylesheets, along with Blueprint's
+---ie/
| +--- IE compatibility stylesheets
+---Application-Screen.css
+---Application-Print.css
+---Application-IE.css
然后你可能可以做:
<link rel="stylesheet" href="Application-Screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="Application-Print.css" type="text/css" media="print">
<!--[if lt IE 8]>
<link rel="stylesheet" href="Application-IE.css" type="text/css" media="screen, projection">
<![endif]-->
如果这不起作用,请检查我的另一个答案。
我不建议您破坏蓝图目录。你应该按原样导入。避免将蓝图css文件导入到不同的树或单独的目录中(这可能会破坏相对路径)。
您的蓝图文件夹路径应该看起来像app/assets/stylesheets/bluent/,并且您应该在导入应用程序样式之前导入蓝图样式(这样您就可以覆盖从蓝图导入的任何不需要的样式)。
以下解决方案基于Matheus Moreira的回答,并关注这些问题:
/*
* application.css
* General styles for the application
*= require ./blueprint/screen
*= require_self
*/
/*
* application-print.css
* Styles for print media
*= require ./blueprint/print
*= require_self
*/
/*
* application-ie.css
* Styles if lt IE 8
*= require ./blueprint/ie
*= require_self
*/
文件树应该看起来像:
app/assets/stylesheets/application.css
app/assets/stylesheets/application-ie.css
app/assets/stylesheets/application-print.css
app/assets/stylesheets/blueprint/
您的应用程序布局应该将样式表导入为:
<%= stylesheet_link_tag 'application', media: 'screen, projection' %>
<%= stylesheet_link_tag 'application-print', media: 'print' %>
<!--[if lt IE 8]>
<%= stylesheet_link_tag 'application-ie', media: 'screen, projection' %>
<![endif]-->
您还应该查看Ryan Bates关于rails 3.1中Sass基础的文章:http://railscasts.com/episodes/268-sass-basics
FYI
我用它在rails 3.1 中创建蓝图
蓝图文件夹路径(之前尝试试运行):
compass init rails . --using blueprint --dry-run --sass-dir app/assets/stylesheets --image-dir app/assets/images
只需节省您在资产下移动物品的时间
或者,您可以将Blueprint的样式表放在public/stylesheets
中,并且可以像在以前版本的Rails:中一样使用它们
stylesheet_link_tag '/stylesheets/blueprint/screen', media: 'screen, projection'
stylesheet_link_tag '/stylesheets/blueprint/print', media: 'print'
<!--[if lt IE 8]>
stylesheet_link_tag '/stylesheets/blueprint/ie', media: 'screen, projection'
<![endif]-->