gulp-sass设置不同样式风格的输出方法

sass最终输出的样式包括下面几种样式风格：
嵌套输出方式 nested
展开输出方式 expanded 
紧凑输出方式 compact 
压缩输出方式 compressed

sass:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

nav {    ul {      margin :  0 ;      padding :  0 ;      list-style :  none ;    }      li {  display : inline- block ; }      a {      display :  block ;      padding :  6px  12px ;      text-decoration :  none ;    } }

　　

设置为展开输出方式nested(默认输出)：

1 2 3 4 5 6 7 8

var gulp = require( 'gulp' ); var sass = require( 'gulp-sass' );   gulp.task( 'sass' , function () {    return gulp.src( './sass/**/*.scss' )      .pipe(sass({outputStyle:  'nested' }).on( 'error' , sass.logError))      .pipe(gulp.dest( './css' )); });

编译出来的css样式风格默认为嵌套输出：

1 2 3 4 5 6 7 8 9 10

nav ul {    margin :  0 ;    padding :  0 ;    list-style :  none ; } nav li {    display : inline- block ; } nav a {    display :  block ;    padding :  6px  12px ;    text-decoration :  none ; }

　　

设置为展开输出方式expanded：

1 2 3 4 5

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

输出样式风格为：

1 2 3 4 5 6 7 8 9 10 11 12 13

nav ul {    margin :  0 ;    padding :  0 ;    list-style :  none ; } nav li {    display : inline- block ; } nav a {    display :  block ;    padding :  6px  12px ;    text-decoration :  none ; }

　　

设置为展开输出方式compact：

1 2 3 4 5

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

输出样式风格为：

1 2 3

nav ul {  margin :  0 ;  padding :  0 ;  list-style :  none ; } nav li {  display : inline- block ; } nav a {  display :  block ;  padding :  6px  12px ;  text-decoration :  none ; }

　　

设置为展开输出方式compressed：

1 2 3 4 5

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

输出样式风格为：

1	nav ul{ margin : 0 ; padding : 0 ; list-style : none }nav li{ display :inline- block }nav a{ display : block ; padding : 6px  12px ; text-decoration : none }

sass最终输出的样式包括下面几种样式风格：
嵌套输出方式 nested
展开输出方式 expanded 
紧凑输出方式 compact 
压缩输出方式 compressed

sass:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

nav {    ul {      margin :  0 ;      padding :  0 ;      list-style :  none ;    }      li {  display : inline- block ; }      a {      display :  block ;      padding :  6px  12px ;      text-decoration :  none ;    } }

　　

设置为展开输出方式nested(默认输出)：

1 2 3 4 5 6 7 8

var gulp = require( 'gulp' ); var sass = require( 'gulp-sass' );   gulp.task( 'sass' , function () {    return gulp.src( './sass/**/*.scss' )      .pipe(sass({outputStyle:  'nested' }).on( 'error' , sass.logError))      .pipe(gulp.dest( './css' )); });

编译出来的css样式风格默认为嵌套输出：

1 2 3 4 5 6 7 8 9 10

nav ul {    margin :  0 ;    padding :  0 ;    list-style :  none ; } nav li {    display : inline- block ; } nav a {    display :  block ;    padding :  6px  12px ;    text-decoration :  none ; }

　　

设置为展开输出方式expanded：

1 2 3 4 5

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

输出样式风格为：

1 2 3 4 5 6 7 8 9 10 11 12 13

nav ul {    margin :  0 ;    padding :  0 ;    list-style :  none ; } nav li {    display : inline- block ; } nav a {    display :  block ;    padding :  6px  12px ;    text-decoration :  none ; }

　　

设置为展开输出方式compact：

1 2 3 4 5

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

输出样式风格为：

1 2 3

nav ul {  margin :  0 ;  padding :  0 ;  list-style :  none ; } nav li {  display : inline- block ; } nav a {  display :  block ;  padding :  6px  12px ;  text-decoration :  none ; }

　　

设置为展开输出方式compressed：

1 2 3 4 5

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

输出样式风格为：

1	nav ul{ margin : 0 ; padding : 0 ; list-style : none }nav li{ display :inline- block }nav a{ display : block ; padding : 6px  12px ; text-decoration : none }