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}