在Rails 3.1中配置蓝图

Question

我是使用rails开发web的新手。我想知道在我的应用程序中添加蓝图的步骤是什么。我找了一个教程，但一旦我发现似乎假设一些先验知识，并完成了几个步骤。

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

我在这个问题上受过一点教育，但从我所读到的，我需要制作一个蓝图文件夹，并在应用/资产/样式表目录中添加一个蓝图.css文件。我不确定是否有一个gem或任何特定的安装步骤或生成器命令来运行设置…这对我来说很奇怪。

感谢您的帮助

Answer 1

GTDev，

我不知道任何关于指南针，但我可以告诉你我是如何使用蓝图与新的资产管道。它工作得很好，感觉就像Rails Way对我来说。

第一个问题:蓝图文件夹在哪里?像Rails中的许多事情一样，您有几个选项，但有些选项比其他选项更好。如果你还没有看过，我强烈建议你花点时间去看看Rails的创建者关于资产管道的演讲。无论如何，他们创建这些空文件夹是为了鼓励样式表和javascript的抽象，就谁写的代码而言，为了什么目的。而以前，我们把他们当作二等公民，把所有东西都扔到公共文件夹里，这有点令人讨厌。现在，由于blueprint是由其他人编写的框架，因此它属于vendor/assets/stylesheets文件夹。因此，在下载并解压缩蓝图后，进入joshuaclayton-blueprint-css-[hex]文件夹并剪切blueprint子文件夹。粘贴到你的vendor/assets/stylesheets文件夹。

第二个问题:如何确保样式表是有条件地应用的?您需要创建3个文件。 vendor.css 、 vendor-print.css ,, vendor-ie.css

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

用mate代替你最喜欢的文本编辑器。如果你更喜欢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
*/

保存,关闭这些文件。你就快完成了。我们现在只需要从模板中调用这些文件。

注意我们没有修改app/assets/stylesheets/application.css它是全新的:)

打开

app/views/布局/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并运行bundle update compass:

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"