Question

我正在将我的应用程序迁移到Rails 3.1并使用blueprint css framework。正如blueprint's github page中的设置说明中所示，要包含ie.css文件需要满足条件。

在rails 3.1中，我们将样式表文件（.css或.scss）放在app / assets / stylesheets中。 Application.css包含以下两个重要的行：

/*
 *= require_self
 *= require_tree . 
*/

在app / assets / stylesheets目录中加载每个.css或.scss文件。这是设置说明告诉我们要做的事情：

<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中的条件？

Answer 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]-->

如果这不起作用，请检查我的其他答案。

Answer 2

我不鼓励你弄乱蓝图目录。你应该按原样导入它。避免将蓝图css文件导入不同的树或单独的目录（它可能会破坏相对路径）。

您的蓝图文件夹路径应该类似于 app / assets / stylesheets / blueprint / ，您应该在应用程序样式之前导入蓝图样式（这样您就可以覆盖任何不可思考的样式从蓝图导入。）

以下解决方案基于Matheus Moreira's answer，并且关注这些问题：

/*
 * 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

Answer 3

FYI

我用它在rails 3.1中创建蓝图

蓝图文件夹路径（尝试之前的干运行）：

compass init rails  . --using blueprint --dry-run --sass-dir app/assets/stylesheets --image-dir app/assets/images

只需节省您在资产下移动资源所花费的时间

Answer 4

或者，您可以将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]-->

Blueprint CSS，Ruby on Rails 3.1和“CSS条件”

4 个答案: