结构和造型Gulp Sass输出

时间:2016-08-14 19:57:13

标签: sass gulp gulp-sass

您好有办法更改gulp-sass设置,以便结束括号位于其自己的行上吗?

当前CSS输出:

body {
  width: 100%; }

我想要的是什么:

body {
  width: 100%;
}

谢谢!

2 个答案:

答案 0 :(得分:5)

您只需要这段代码:

gulp.task('sass', function(){
  return gulp.src('app/scss/styles.scss')
    .pipe(sass({outputStyle: 'expanded'})) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/css'))
});

您需要澄清您想要扩展的输出方式 您可以在此处找到有关different sass output styles

的信息

答案 1 :(得分:2)

您可以在sass编译器之后使用gulp-cssbeautify

gulp.task('sass', function() {
    return gulp.src('./scss/*.css')
       .pipe(sass().on('error', sass.logError))
       .pipe(cssbeautify())
       .pipe(gulp.dest('./css/'));
}
编辑:在我看来乔治H.他的答案更有效率,请看下面。