因为每个前端工程师编写代码的风格都不太一样，所以Sass的编译也非常人性化的提供了不同风格的编译方式，主要分为4种。
比如下面这一段Sass代码，我们来看看在不同风格下，会编译成什么样吧：
- nav {
- ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- li { display: inline-block; }
- a {
- display: block;
- padding: 6px 12px;
- text-decoration: none;
- }
- }
1.嵌套输出 nested:
- nav ul {
- margin: 0;
- padding: 0;
- list-style: none; }
- nav li {
- display: inline-block; }
- nav a {
- display: block;
- padding: 6px 12px;
- text-decoration: none; }
2.展开输出 expanded：
- nav ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- nav li {
- display: inline-block;
- }
- nav a {
- display: block;
- padding: 6px 12px;
- text-decoration: none;
- }
其实可以看出来和嵌套输出挺像的，只不过闭合的大括号会另起一行（个人比较喜欢这种）
3.紧凑输出 compact
- nav ul { margin: 0; padding: 0; list-style: none; }
- nav li { display: inline-block; }
- nav a { display: block; padding: 6px 12px; text-decoration: none; }
这个也就是所谓的单行CSS格式啦，还是有不少人喜欢这个风格的
4.压缩输出 compressed：
- nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
也就是变成了压缩之后的CSS代码，去掉了所有的空格和换行
那么最关键的问题来了，如何在编译sass的时候指定输出风格，接下来我会分享命令行和gulp两种方法：
1.命令行编译：
sass --watch style1.scss:style1.css --style compressed
嘛，其实很简单，就是在原来编译指令的后面加了 --style 输出风格
所以只要依据需求，把compact,compressed这样的参数写在--style后面就行
2.gulp编译：
gulpfile.js代码如下：
- 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'));
- });
其实这个大家应该也能看得出来，就是在原本sass()中加了一个参数outputStyle:'编译风格'。
tips:在不指定风格的情况下，默认为嵌套输出。