4

我正在将我的应用程序迁移到 Rails 3.1 并使用蓝图 css 框架。正如在蓝图的 github 页面的设置说明中看到的，有一个条件需要为真才能包含 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 中“创建”这样的条件？

4

4 回答 4

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

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

于 2011-06-11T21:18:11.467 回答
1

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

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

以下解决方案基于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 基础的 Rails： http ://railscasts.com/episodes/268-sass-basics

于 2011-09-11T16:04:07.403 回答
1

供参考

我用它在 Rails 3.1 中创建蓝图

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

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

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

于 2011-10-03T10:18:09.297 回答
-1

或者，您可以将 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]-->
于 2011-06-11T21:28:25.943 回答