如何组织sass文件,因此指南针按正确的顺序包含它们

Question

我正在使用最新的yeoman构建1.0.0beta3和指南针0.12.2构建单页面应用程序

在开始时compass:server我会遇到很多错误,但在开发时我的浏览器中似乎都没问题.grunt build然后不会失败,但构建不正确的CSS输出,以便浏览器中的布局是borken.也许这是我的错,是由于误解造成的.

我所拥有的是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和罗盘服务器时,我收到以下错误:

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

现在一切正常,我很难学到另一件事.