代码之家 › 专栏 › 技术社区 › Frank N dqthe

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

gulp-sass gulp-watch gulp sass error-handling

Frank N dqthe · 技术社区 · 9 年前

是的,沙斯在我的小文件里(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'));
});

米尔格拉齐

1 回复 | 直到 9 年前

Community Mohan Dere 9 年前

这仍然是一个语法错误:没有看到错误,没有中断。

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

.foo
  color: blue
  clear both

这将编译为以下CSS:

.foo {
  color: blue; 
}

当然 看起来像 错误指定的错误 clear both 属性被默认忽略。实际上,您已经定义了一个嵌套 .foo clear both 选择器。但是自从你 傅:两个都清楚 选择器是空的它由SASS编译器进行优化。

当您查看另一个SASS示例时,这一点变得很清楚:

.foo
  color: blue
  clear both
    color: red

这将编译为以下CSS:

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

现在 傅:两个都清楚 选择器不为空,编译器不再优化CSS。

SASS不知道也不关心实际上没有 clear 或 both 任何HTML规范中的元素。这是一个功能,而不是错误,因为:

可以在HTML中添加和删除元素。这将在新的HTML版本标准化时对SASS进行必要的更改。
您已经可以定义 custom HTML elements (尽管在这种情况下 清楚的 和 二者都 即使对于web组件也不是有效的名称)。
CSS(因此SASS)绝不局限于HTML。你也可以 use CSS to style XML documents 这显然允许您定义自定义元素,如 清楚的 或 二者都 .