blueprint css-如何在Rails 3.1中加载css框架

我正在尝试将CSS框架Blueprint加载到我的Rails 3.1应用程序中。

在Rails 3.0+中，我的视图/layouts/application.html.erb:中会有这样的内容

  <%= stylesheet_link_tag 'blueprint/screen', 'application' %>
  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>
  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->

但是，Rails3.1现在使用SASS。加载这些Blueprint CSS文件的正确方法是什么？

目前，我在app/assets/stylesheets/中有蓝图目录

我的应用程序/资产/样式表/application.css看起来像：

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
*/

我应该对application.css做些什么，以便它加载必要的蓝图文件吗？如果是，如何？

第二，我如何提供某种条件来检查IE8，加载blueprint/ie.css？

编辑：

嗯，再次重新加载应用程序的网页。Rails3.1确实包含了蓝图文件。即使css文件在一个文件夹中（在本例中为：app/assets/stylesheets/blueprint。）

这给我留下了两个问题

如果lt IE 8条件使用SASS，应如何应用
如何使用SASS加载打印格式的css文件（即<%=stylesheet_link_tag'blueprint/print'，'media'=>'print'%>）

如果有人想知道我最后是怎么做到的。

我删除了

 *= require_tree .

我的app/assets/stylesheets/application.css，现在看起来像：

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require 'blueprint/screen'
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

在app/views/layouts/application.html.erb中，我有：

<html>
<head>
  <title><%= yield(:title).present? ? yield(:title) : 'Foobar' %></title>
  <%= favicon_link_tag %>
  <%= stylesheet_link_tag    'application' %>
  <%= javascript_include_tag 'application' %>
  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>
  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->
...

希望这能帮助到别人。

这个博客有我认为你正在寻找的解决方案（就像我一样）。

不要把blueprint放在app/assets中，因为它会被require_tree吸收。不要把它放在public上，因为这不是资产的去向。把它放在vendor/assets/stylesheets中，然后在你自己的application.css之前把它们包括在application.html.erb中，如下：

<%= stylesheet_link_tag 'blueprint/screen', :media => "screen, projection" %>
<%= stylesheet_link_tag 'blueprint/print', :media => "print" %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie', :media => "screen, projection" %><![endif]-->
<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>

即使Rails 3.1（RC）允许使用SASS文件，它也不会强制使用。/public/stylesheets中的文件仍然可以正常使用。

如果您希望激活SASS解析器（并使用新框架），请将my_styles.css重命名为my_styles.css.scss，并将其放在/app/assets/stylesheets文件夹中。然后在application.erb.html中只包含您的application.css，然后取消注释其中的require_self/require_tree行。

想了解更多信息，下面是我在谷歌上快速搜索后发现的一个博客：http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html

至于IE 8。IE中有一个错误，不总是执行条件，所以尝试

 <link href='./design/style-ie-8.css' rel='stylesheet' type='text/css' /> 

尝试重置解析器以执行规则有点麻烦

以下是如何在rails 3.1 中使用"blueprint rails"gem

添加"蓝图轨道"宝石：

/Gemfile

gem 'blueprint-rails', , '~> 0.1.2'

将通用蓝图文件添加到清单中，以便将它们预编译到应用程序中。css:

/app/assets/stylesheets/application.css

 /*
  *= require 'blueprint'
  */

添加application.css，其中将包含通用蓝图文件。同时有条件地添加print.css和ie.css：

/Views/layouts/application.html.erb

<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>
<!--[if lt IE 8]>
  <%= stylesheet_link_tag 'blueprint/ie' %>
<![endif]-->

由于条件，print.css和ie.css需要作为application.css之外的独立文件（默认情况下不包括在require"blueprint"中）。所以我们需要将它们添加到：

/配置/环境/生产.rb

# Separate assets
config.assets.precompile += ['blueprint/print.css', 'blueprint/ie.css']

然后运行：

bundle exec rake assets:precompile

一种不同的做事方式：

制作app/assets/stylesheets/custom.css

然后更改custom.css以使用所需的文件：

/*
 *= require_self
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

最后更改布局中的链接标记（确保删除"应用程序"样式表）

= stylesheet_link_tag    "custom"

然后，您可以手动添加任何其他样式表（如"ie"特定的）和其他样式表组（如加载所有蓝图文件的蓝图…）

您可能还需要（在生产.rb中）

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile += %w(custom.css)

绝对同意您的解决方案，不要认为"require_tree"是应用程序中的一个好做法。css，它会包括任何内容，显然它太激进了。我已经挣扎了一段时间，最后，我选择了完全相同的解决方案，使用应用程序包含这些脚手架样式，然后使用HTML标记包含一些可选和条件样式。谢谢

翻译的SASS文件的最终结果实际上是css文件，所以它不应该改变包含样式表的方式。

此外，仅仅因为启用了SASS-gem并不意味着你不能同时使用普通的css文件。因此，包含blueprint css文件应该没有问题。

然而，如果你想去纯粹的SASS，我建议你看看指南针宝石，它对蓝图有很好的支持：

http://compass-style.org/

它还包含对ie特定样式表和宏的支持。

相关内容

最新更新

热门标签：