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: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
tasks: ['coffee:dist']
},
coffeeTest: {
files: ['test/spec/{,*/}*.coffee'],
tasks: ['coffee:test']
},
compass: {
**files: ['<%= yeoman.app %>/styles/{,**/}*.{scss,sass}'],**
tasks: ['compass']
},
livereload: {
files: [
'<%= yeoman.app %>/*.html',
'{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
**'{.tmp,<%= yeoman.app %>}/styles/{,**/}*.css',**
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,webp}'
],
tasks: ['livereload']
}
},
Can anyone enlighten me?
Regards Felix