蓝图CSS,Ruby on Rails 3.1和"CSS conditions"



我正在将我的应用程序迁移到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]-->

相关内容

  • 没有找到相关文章

最新更新