How to organize sass files, so compass includes them in the right order

Question

I'm building a single page app using the most recent yeoman build 1.0.0beta3 and compass 0.12.2 When starting `compass:server` I get lots of errors, but during dev time all seems to be ok in my browser. `grunt build` then does not fail, but builds improper CSS output, so that the layout in the browser is borken. Maybe that's all my fault, caused by a misunderstanding. What I have is a `main.sass` file with all my includes: ``` // compass @import 'compass' @import 'compass/reset' @import 'compass/css3' ... and so on //custom includes in the right order @import 'base/dimensions' @import 'base/colors' @import 'base/layout' ``` The file `base/dimensions` now defines: ``` // height of the footer $footer-height: 50px ``` And (later) in `base/layout` I make use of that: ``` .content-bg background-color: rgba(0, 0, 0, 0.05) bottom: $footer-height ... and more ``` When starting the grunt and compass server now, I get the following error: ``` Running "compass:server" (compass) task directory .t…

Accepted Answer

For everyone facing the same problem: The naming of the files does the trick. Every file that is to be included in you main.css like so:

```
@include 'base/colors'
```

has to be named:

```
_colors.sass
```

instead of:

```
colors.sass
```

in the `base` directory in that case. What I did as well, was renaming `main.css` to `main.css.sass`

Now everything works correctly and I learned another thing the hard way.

How to organize sass files, so compass includes them in the right order

Solution

Problem