compass-sass - 如何组织 sass 文件，以便 compass 以正确的顺序包含它们

Question

我正在使用最新的 yeoman build 1.0.0beta3 和 compass 0.12.2 构建一个单页应用程序

启动 compass:server 时出现很多错误，但在开发期间，我的浏览器似乎一切正常。 grunt build 然后不会失败，但会构建不正确的 CSS 输出，从而导致浏览器中的布局被破坏。也许这都是我的错，是误会造成的。

我拥有的是一个 main.sass 文件，其中包含我所有的内容:

// 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'

文件 base/dimensions 现在定义:

// height of the footer
$footer-height: 50px

并且(稍后)在 base/layout 我使用它:

.content-bg
  background-color: rgba(0, 0, 0, 0.05)
  bottom: $footer-height
  ... and more

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

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".)

还有很多类似的错误。 (开发时页脚高度确实没问题。)

我不知道如何解决这个问题，也不知道这是否会导致构建运行后出现不正确的 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: {
            **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']
        }
    },

谁能赐教？

问候 费利克斯

Answer 1

对于面临相同问题的每个人:文件的命名可以解决问题。每个要包含在 main.css 中的文件都像这样:

@include 'base/colors'

必须命名:

_colors.sass

代替:

colors.sass

在这种情况下，在 base 目录中。我所做的也是将 main.css 重命名为 main.css.sass

现在一切正常，我又学到了另一件事。