如何组织SASS文件,所以指南针包括他们在正确的顺序(How to organize sass fi

2019-08-17 23:03发布

我建设使用最新的自耕农构建1.0.0beta3和指南针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

当现在开始呻吟,指南针服务器,我收到以下错误:

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文件从/款式也子目录加载:

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.cssmain.css.sass

现在一切正常,我学到的另一件事了艰辛的道路。



文章来源: How to organize sass files, so compass includes them in the right order