How does one load a CSS framework in Rails 3.1?

2019-01-31 17:11发布

I am trying to load a CSS framework, Blueprint, onto my Rails 3.1 application.

In Rails 3.0+, I would have something like this in my views/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]-->

However, Rails 3.1 now uses SASS. What would be the proper way to load these Blueprint CSS files?

Currently, I have the blueprint dir in app/assets/stylesheets/

My app/assets/stylesheets/application.css looks like:

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

Should I do something with application.css so that it loads the necessary Blueprint files? If so, how?

Second, how would I provide some kind of condition to check for IE8, to load blueprint/ie.css?

EDIT:

Hmmm, reloading the app's web page again. Rails 3.1 does include the Blueprint files. Even if the css files are in a folder (in this case: app/assets/stylesheets/blueprint.)

Which leaves me with two questions

  1. How should one apply the if lt IE 8 condition using SASS?
  2. How does one load a css file for the print format (i.e. <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>) using SASS?

7条回答
狗以群分
2楼-- · 2019-01-31 17:59

Absolutely agree with your solution, don't think "require_tree" is a good practice in application.css, it will include anything, apparently it's too aggressive. I have struggled for a while, finally, I picked exactly the same solution, use application to include those scaffold styles and then use HTML tags to include some optional and conditional styles. Thanks.

查看更多
登录 后发表回答