How to make beautiful compiled css code after gulp-sass planing?

Question

Sass

How to make a beautiful compiled css code, with all the indents and spaces after the gulp-sass plan?
This is what my css looks like now

.second-column table {
  width: inherit;
  margin-top: 17px;
  border-collapse: separate;
  border-spacing: 0 5px; }
  .second-column table tr {
    text-align: center;
    height: 70px;
    line-height: 70px;
    background: #ecf0ea; }
  .second-column table thead {
    line-height: 30px;
    font-family: 'open_sansbold';
    font-size: 16px;
    color: #5f5f5f;
    text-align: center; }
    .second-column table thead tr {
      background: none !important; }
  .second-column table tbody .item-counter {
    position: relative;
    padding-left: 5px;
    width: 50px; }
    .second-column table tbody .item-counter p {
      display: inline-block;
      margin: 0 auto;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-family: 'open_sansregular';
      text-decoration: underline;
      font-size: 18px;
      color: #328dba; }

Hoyau to look like this

.ct-chart .ct-grid {
  stroke: white;
}

#steps {
  width: 700px;
  height: 150px;
  margin:50px auto;
  background: yellow;
  text-align: center;
  text-transform: uppercase;
  font-family: Arial;
  font-size:30px;
  line-height: 60px;
}

td {
  min-width: 100px;
}

tr td:first-child {
  background-color: #3D83CA;
}

Here is the gulpfile.js source

var gulp = require('gulp'),
  uglify = require('gulp-uglify'),
  sass = require('gulp-sass'),
  plumber = require('gulp-plumber'),
  //livereload = require('gulp-livereload'),
  prefix = require('gulp-autoprefixer'),
  jade = require('gulp-jade'),
  obfuscate = require('gulp-obfuscate'),
  //concatCss = require('gulp-concat-css'),
  minifyCSS = require('gulp-minify-css');
  // jadephp = require('gulp-jade-php');


//Scripts Task
//Uglifies
gulp.task('scripts',function(){
  gulp.src('js/*.js')
    .pipe(plumber())
    //.pipe(uglify())
    .pipe(gulp.dest('output/html-templates/gamingclouds/minjs'));
});

//Styles Task
//Sass
gulp.task('sass',function(){
  gulp.src('scss/**/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(prefix('last 10 versions'))
    .pipe(gulp.dest('output/html-templates/gamingclouds/css/'));
});

//Minify css



//Watch Task JS,Sass,Jade
gulp.task('watch',function(){
  gulp.watch('js/*.js', ['scripts'])  //**.*.js
  gulp.watch('scss/**/*.scss', ['sass']);
  gulp.watch('jade/*.jade', ['jade']);
  //gulp.watch('output/css/*.css',['minifycss']);
});


//Simple Jade task 
gulp.task('jade', function() {
  gulp.src('jade/*.jade')
  	.pipe(plumber())
    .pipe(jade({pretty:true}))
    //.pipe(obfuscate())
    .pipe(gulp.dest('output/html-templates/gamingclouds'))
});

//Jade to php 





gulp.task('default',['scripts','sass','jade','watch']);

Answer 1

Replace pipe with this one
or manually add in your pipe
{outputStyle: 'expanded'}

Answer 2

There are 2 options here:
1.
Manually 2. I copy paste in jsfiddle.net and press TidyUp, fast, clear, youthful.

Answer 3

Use the "comb" - CSScomb Pre
-installed style guide presets (Zem, Yandex, CSSComb) are included or you can customize the config for yourself.
There are modules for Grunt and Gulp

Answer 4

gulp-sass is libsass's interpretation of sass, and libsass currently supports nested and compressed output file types. Pretty or expanded - not supported, use original sass written in ruby.

Answer 5

There is an answer to the question here;)
What is the Gulp plugin for "beautiful" compilation from SASS to CSS?