结构化和样式化 Gulp Sass 输出

Question

您好，有没有办法更改 gulp-sass 设置，使右括号单独占一行？

当前CSS输出：

body {
  width: 100%; }

我想要的：

body {
  width: 100%;
}

谢谢！

Answer 1

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

gulp.task('sass', function() {
    return gulp.src('./scss/*.css')
       .pipe(sass().on('error', sass.logError))
       .pipe(cssbeautify())
       .pipe(gulp.dest('./css/'));
}

编辑：在我看来 George H. 他的回答更有效率，请看下面。

Answer 2

你只需要这个代码：

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

的信息

结构化和样式化 Gulp Sass 输出

Structuring and styling Gulp Sass output

sass

gulp

gulp-sass