sass/gulp-sass 对某些错误（无效属性）保持沉默

Question

是的，我的 gulp 文件 (gulp@3.9.1) 中的 sass 报告了很多错误（并继续观察，就像它应该的那样......），但不是这样的错误：

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

content 和 display 使其正确进入实际的 class （其中引用了 mixin），但 clear 没有（因为我错过了冒号).这是一个语法错误（所以它不像 rareproperty: 42px; 那样被优雅地处理）。 → 仍然：没有发现错误，没有中断。

我的gulp任务：

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);    // whosebug.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 选择器是 empty 它被 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（尽管在这种情况下 clear 和 both 即使对于 Web 组件也不是有效名称）。
CSS（因此 SASS）绝不仅限于 HTML。您还可以 use CSS to style XML documents ，这显然可以让您定义自定义元素，例如 clear 或 both.

sass/gulp-sass 对某些错误（无效属性）保持沉默

sass/gulp-sass remains silent on certain errors (invalid properties)

error-handling

sass

gulp

gulp-watch

gulp-sass