error-handling - sass/gulp-sass对某些错误(无效属性)保持沉默

Question

是的，我的gulpfile中的sass(gulp@3.9.1)报告了许多错误(并继续进行监视，正如应有的那样……)，但没有这些错误:

=clearfix()
    &:after
        content: ""
        display: table
        clear both

content和 display将其正确地放入实际的类中(在其中引用了mixin)，但是 clear没有(因为我错过了冒号)。这是一个语法错误(因此不像优雅地处理的 rareproperty: 42px;)。 →仍然: 没有发现错误，没有中断。

我的任务:

gulp.task('sass', function() {

    return gulp.src(src.scssMaster)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(  sass({
                    debugInfo   : true,
                    lineNumbers : true,
                    outputStyle: 'expanded'
                })
                .on('error', function(err){
                    gutil.log(err);    // stackoverflow.com/a/30742014/444255
                    this.emit('end');
                })
            )
        .pipe(autoprefixer({
            browsers: ['iOS >= 5', 'ie 8', 'Firefox > 2'],
            cascade:   true,
            remove:    true
        }))
        .pipe(rename('lznet.css'))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest(src.cssDir))

        .pipe(reload({stream: true}))
        .on('end', () => gutil.log('sass thing done'));
});

米勒·格拉兹❤

Answer 1

This is a syntax error → still: No errors seen, no interruption.

这根本不是语法错误。举个例子:

.foo
  color: blue
  clear both

这将编译为以下CSS:

.foo {
  color: blue; 
}

肯定 看起来像，错误地指定了 clear both属性的错误被忽略了。实际情况是您定义了一个嵌套的 .foo clear both选择器。但是，由于您的 .foo clear both选择器为 为空，因此SASS编译器对其进行了优化。

当您查看另一个SASS示例发生了什么时，这变得很清楚:

.foo
  color: blue
  clear both
    color: red

这将编译为以下CSS:

.foo {
  color: blue; 
}
.foo clear both {
  color: red; 
}

现在 .foo clear both选择器不为空，并且编译器也不再优化CSS。

SASS不知道或不在乎任何HTML规范中实际上都不存在 clear或 both元素的事实。这是一个功能，而不是错误，因为:

元素可以从HTML添加和删除。每当新的HTML版本被标准化时，就需要对SASS进行更改。

您已经可以定义custom HTML elements(尽管在这种情况下，即使对于Web组件，clear和both也不是有效的名称)。

CSS(以及因此的SASS)绝不限于HTML。您也可以使用use CSS to style XML documents，它显然可以让您定义自定义元素，例如clear或both。