gulp-sass 一直报错 到底是怎么回事？

之前一直在用less做css的预处理，但最近觉得sass其实也挺不错的就想切换到sass，但是在node的环境下 不知为什么，却一直报错

//问题代码，gulpfile的配置信息
var gulp=require('gulp'); //基础库
var sass=require('gulp-sass'); //编译sass
//配置文件路径
var paths={
    src_html:"./src/**/*.html",
    src_less:"./src/css/**/*.less",
    src_css:"./src/css/**/*.css",
    src_sass:"./src/css/**/*.sass",
    src_json:"./src/**/*.json",
    src_images:"src/images/**/*",
    src_pic:"src/pic/**/*",
    src_js:"./src/js/**/*.js",
    src_text:"./src/**/*.text",

    dist:"./dist",
    dist_css:"./dist/css",
    dist_mincss:"./dist/mincss",
    dist_images:"dist/images",
    dist_html:"./dist/**/*.html",
    dist_pic:"dist/pic",
    dist_js:"./dist/js",
    dist_minjs:"./dist/minjs"
}
//style任务
gulp.task('styles',function(){
    return gulp.src([paths.src_sass]) //这段代码是从官网上拷贝下来的，只是修改了一下路径而已
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(paths.dist_css));
})

//监听文档
gulp.task('watch',function(){
    //监听less,sass,css
    gulp.watch([paths.src_sass,paths.src_less,paths.src_css],['styles', 'html'])
    //监听js
    gulp.watch([paths.src_js],['scripts'])
    //监听图片
    gulp.watch([paths.src_images],['images'])
    gulp.watch([paths.src_pic],['pic'])
    //监听hhtml,json,text
    gulp.watch([paths.src_html,paths.src_json,paths.src_text], function(event) {
      gulp.run('html')
  });
})

这个plugin sass错误不知道是怎么回事

//css代码如下 ，很简单的css代码仅仅为了测试
#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
  pre { font-size: 3em; }
}

我的mac 通过淘宝的cnpm 安装了gulp-sass模块
不知道错在哪了，找了半天没找了，望大神来解答
之前这样的配置文件 使用less就是完全正常的

---

sass扩展名改成scss

---

样式清空看看报错不，不报错那就是样式问题