Is it possible to change application.css to application.css.sass?

Question

I would like to change my application.css file to a sass file and use @import to pull all the necessary files. Then I want to @import the application.css.sass into page specific sass files. This all works beautifully in development, but when I push it to production env on heroku I get this error:

Error compiling CSS asset
Sass::SyntaxError:  File to import not found or unreadable: application

application.css.sass:

@import "reset"
@import "typography"
@import "buttons"
@import "junk"

$yellow: #f0f090
$orange: #f89818
$blue1: #184898
$blue2: #4888c8

body
 background: ...
 ...
 /* all the rest of the app-wide styling */

uniquePage.css.sass:

@import "application"
/*page specific styling*/

Then on the pages that need stuff different from application.css I call

!!! 5
%html
  %header       
    = stylesheet_link_tag "uniquePage"

Answer 1

In Rails 3.1, application.css is intended to be used as a manifest file. You shouldn't rename it, nor you should place content inside it except require or include directives.

Use a different file name for your purpose.

Also note that the SCSS @import syntax it's like using a partial. If you want to @import application the file to be imported should be called _application, not application.

Answer 2

you should change it to application.scss :)

please check these two RailsCasts:

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

http://railscasts.com/episodes/282-upgrading-to-rails-3-1

+1 on Simone's suggestions

Answer 3

Then I guess the question becomes, how do I make different manifest files for different css sets?

There are several ways to do this:

1. Per page sheets

This is what you are doing now, but I would organise the sheets slightly differently, using @imports in both application and the unique page. (Rather than importing application into the unique page).

2. Use a second sheet for just those pages

You can have a second sheet with just the changes for that page. All pages have the application sheet, and a second tag is added on the unique page with just the required changes. This costs you an extra http request.

3. Reorganize your CSS

Unless the extra CSS is substantial, you may be better off refactoring to include the code in your main file. It is easy to add an extra class to the body tag of the unique page and adjust any CSS to for the page to use that.

You can still put that CSS in a file for the unique page (to help with maintenance), and @import it to your main file.

As a general rule, unless the CSS changes are substantial, I would try to merge them into the main CSS, otherwise go for option 1.