Question

我是使用rails进行Web开发的新手。我想知道将蓝图添加到我的应用程序的步骤是什么。我已经找了一个教程但是我曾经找到过一个似乎已经知道了一些先前的知识，并且完成了一些步骤。

现在我的应用程序中捆绑了指南针，scss，haml。从这里我想找到一个教程，解释每个蓝图scss文件应该去哪里。

我在这个问题上受过一些教育，但从我读到的内容我需要制作一个蓝图文件夹并在app / assets / stylesheets目录中添加一个blueprint.css文件。我不确定是否有宝石或任何特定的安装步骤或生成器命令来设置...这对我来说似乎很奇怪。

感谢您的帮助

Answer 1

GTDev，

我对Compass一无所知，但我可以向您展示我如何使用Blueprint和新的Asset Pipeline。它很好，对我来说感觉就像 Rails Way 。

第一个问题：蓝图文件夹在哪里？与Rails中的许多内容一样，您有几个选项，但有些选项比其他选项更好。如果您还没有，我强烈建议您花点时间观看Rails的创建者谈论Asset Pipeline。 [RailsConf 2011 Keynote]无论如何，他们创建了这些空文件夹，以鼓励样式表和javascripts的抽象，无论是编写代码的人，还是出于什么目的。在此之前，我们将它们视为二等公民，将所有内容都放入公共文件夹中，这有点令人讨厌。现在，由于蓝图是由其他人编写的框架，因此它属于 vendor / assets / stylesheets 文件夹。因此，在下载并解压缩蓝图后，进入 joshuaclayton-blueprint-css- [hex] 文件夹并剪切 blueprint 子文件夹。将其粘贴到 vendor / assets / stylesheets 文件夹中。

第二个问题：如何确保有条件地应用样式表？ 您需要创建3个文件。 vendor.css ， vendor-print.css ，＆amp; 供应商ie.css

$ mate vendor/assets/stylesheets/vendor.css
$ mate vendor/assets/stylesheets/vendor-print.css
$ mate vendor/assets/stylesheets/vendor-ie.css

替换你最喜欢的文本编辑器的配偶。如果您更喜欢GUI，只需创建一个新文件，然后另存为...现在复制并粘贴。

vendor.css 文件如下所示：

/*
 * vendor.css
 * 3rd party libraries for computer displays
 *= require blueprint/screen
*/

vendor-print.css 文件如下所示：

/*
 * vendor-print.css
 * 3rd party libraries for printed media
 *= require blueprint/print
*/

vendor-ie.css 文件如下所示：

/*
 * vendor-ie.css
 * 3rd party libraries for IE compatibility
 *= require blueprint/ie
*/

保存＆amp;关闭那些文件。你几乎完成。我们现在必须从模板中调用文件。

注意 我们未对 app / assets / stylesheets / application.css 进行任何更改。这是开箱即用的新鲜事物：）

打开 app / views / layouts / application.html.haml 。如果它不存在，请删除 app / views / layouts / application.html.erb 并创建新文件。看起来应该是这样的：

!!! 5
%html{:lang => "en-US"}
    %head
        %meta{:charset => "utf-8"}
        = csrf_meta_tags
        = stylesheet_link_tag    "vendor",       :media => "screen"
        = stylesheet_link_tag    "application",  :media => "screen"
        = stylesheet_link_tag    "vendor-print", :media => "print"
        /[if lt IE 8]
            = stylesheet_link_tag  "vendor-ie",  :media => "screen"
        = javascript_include_tag "application"
        /[if lt IE 9]
            %script{:src => "http://html5shiv.googlecode.com/svn/trunk/html5.js"}
        %title foo
    %body
        = yield

应该这样做。重启服务器，看看会发生什么。

Answer 2

1）添加到Gemfile并运行捆绑更新罗盘：

group :assets do
  gem 'compass', '~> 0.12.alpha'
end

2）在app / assets / stylesheets上创建一个blueprint.css.scss文件，其中包含以下内容：

@import '_blueprint';
@include blueprint;

3）进入app / assets / stylesheets / application.css有这个：

 /*
  *= require_self
  *= require blueprint
  *= require_tree .
 */

4）将 config / application.rb 添加到以下两行：

config.assets.paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/compass/stylesheets"
config.assets.paths << "#{Gem.loaded_specs['compass'].full_gem_path}/frameworks/blueprint/stylesheets"

在Rails 3.1中配置蓝图

2 个答案: