如何组织sass文件，所以指南针以正确的顺序包含它们

问题描述

我使用最新的yeoman build 1.0.0beta3和compass 0.12.2来构建单页应用程序。
$ b

开始指南针时：服务器我得到了很多错误，但是在开发过程中，我的浏览器中似乎都没问题。 grunt build 然后不会失败，但是会生成不正确的CSS输出，因此浏览器中的布局会变成borken。也许这都是我的错，是由误会造成的。

我有一个 main.sass 文件，包括我的所有内容：

  //指南针
 @import'指南针'
 @import'指南针/重置'
 @import'指南针/ css3' 
 ...等等
 
 //自定义包含正确的顺序
 @import'base / dimensions'
 @import'base / colors'
 @import'base / layout'
  

文件 base / dimensions 现在定义：

  //页脚高度
 $页脚高度：50px 
  

以及（稍后）在 base / layout I利用这一点：

  .content-bg 
 background-color：rgba（0，0，0，0.05 ）
底部：$ footer-height 
 ...以及更多
  

当现在启动grunt和compass服务器，出现以下错误：

 运行compass：server（指南针）任务
目录.tmp / styles / 
创建.tmp / style s / avendor_font-awesome.css 
创建.tmp / styles / base_colors.css 
创建.tmp / styles / base_dimensions.css 
错误应用/样式/ base_layout.sass（第23行：未定义变量：$ footer-height。）
  

还有很多类似的错误。 （在开发时间页脚高度确实可以。）

我不知道如何解决这个问题，并且我也不知道是否这会导致不正确的CSS构建运行。但是当我通过发行 grunt 来构建时，我在控制台中看到相同的错误。

我应该提到，我对Gruntfile.js做了一些更改，以便.sass文件也可以从/ styles的子目录中加载：

  grunt.initConfig（{
 yeoman：yeomanConfig，
 watch：{
 coffee：{
 files：[ '<％= yeoman.app％> / scripts / {，* /} *。coffee']，
 tasks：['coffee：dist'] 
}，
 coffeeTest： {
 files：['test / spec / {，* /} *。coffee']，
 tasks：['coffee：test'] 
}，
 compass：{ 
 **档案：['<％= yeoman.app％> / styles / {，** /} *。{scss，sass}']，** 
 tasks：['compass '] 
}，
 livereload：{
文件：[
'<％= 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}'
]，
任务：['livereload'] 
} 
}，
  
 
 
 
关注
 Felix 
解决方案
对于每个面临同样问题的人：文件的命名确实有效。每一个包含在main.css中的文件都是这样的： 
 
 
  @include'base / colors'
  
必须命名为：
  _colors.sass 
  
而不是：
 
 
  colors.sass 
  
在 base 目录。我所做的也是将 main.css 重命名为 main.css.sass  
 
 
 
现在一切工作正常，我学到了另一件难事。
 
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?
RegardsFelix
 解决方案 
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.
                        
这篇关于如何组织sass文件，所以指南针以正确的顺序包含它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！