How to organize sass files, so compass includes them in the right order-Collection of common programming errors

10 years ago

admin

2 minutes

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 .tmp/styles/ 
  create .tmp/styles/avendor_font-awesome.css 
  create .tmp/styles/base_colors.css 
  create .tmp/styles/base_dimensions.css 
  error app/styles/base_layout.sass (Line 23: Undefined variable: "$footer-height".)

And lots of similar errors. (The footer height is indeed ok during dev time.)

I do not know how to solve that problem, and I do not know either if this causes the improper CSS after a build run. But when I build by issuing grunt I see the same errors in the console.

I should mention, I made some changes to Gruntfile.js, so that .sass files are loaded from subdirectories of /styles also:

grunt.initConfig({
    yeoman: yeomanConfig,
    watch: {
        coffee: {
            files: ['/scripts/{,*/}*.coffee'],
            tasks: ['coffee:dist']
        },
        coffeeTest: {
            files: ['test/spec/{,*/}*.coffee'],
            tasks: ['coffee:test']
        },
        compass: {
            **files: ['/styles/{,**/}*.{scss,sass}'],**
            tasks: ['compass']
        },
        livereload: {
            files: [
                '/*.html',
                '{.tmp,}/styles/{,*/}*.css',
                **'{.tmp,}/styles/{,**/}*.css',**
                '{.tmp,}/scripts/{,*/}*.js',
                '/images/{,*/}*.{png,jpg,jpeg,webp}'
            ],
            tasks: ['livereload']
        }
    },

Can anyone enlighten me?

Regards Felix

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.