蓝图 CSS、Ruby on Rails 3.1 和“CSS 条件”

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

仅供参考

我用它在 Rails 3.1 中创建蓝图

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

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

只是节省您在资产下移动东西所花费的时间

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 基础知识 的 Rails：http://railscasts.com/episodes/268-sass-basics

Answer 3

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

Answer 4

尝试使用三个单独的文件来要求所有相关文件：

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

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