Sass学习之路(4)——不同样式风格的输出方式

因为每个前端工程师编写代码的风格都不太一样，所以Sass的编译也非常人性化的提供了不同风格的编译方式，主要分为4种。

比如下面这一段Sass代码，我们来看看在不同风格下，会编译成什么样吧：

1. nav {
2. ul {
3. margin: 0;
4. padding: 0;
5. list-style: none;
6. }
7. li { display: inline-block; }
8. a {
9. display: block;
10. padding: 6px 12px;
11. text-decoration: none;
12. }
13. }

1.嵌套输出 nested:

1. nav ul {
2. margin: 0;
3. padding: 0;
4. list-style: none; }
5. nav li {
6. display: inline-block; }
7. nav a {
8. display: block;
9. padding: 6px 12px;
10. text-decoration: none; }

2.展开输出 expanded：

1. nav ul {
2. margin: 0;
3. padding: 0;
4. list-style: none;
5. }
6. nav li {
7. display: inline-block;
8. }
9. nav a {
10. display: block;
11. padding: 6px 12px;
12. text-decoration: none;
13. }

其实可以看出来和嵌套输出挺像的，只不过闭合的大括号会另起一行（个人比较喜欢这种）

3.紧凑输出 compact

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

这个也就是所谓的单行CSS格式啦，还是有不少人喜欢这个风格的

    4.压缩输出 compressed：

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}

也就是变成了压缩之后的CSS代码，去掉了所有的空格和换行

那么最关键的问题来了，如何在编译sass的时候指定输出风格，接下来我会分享命令行和gulp两种方法：

1.命令行编译：

sass --watch style1.scss:style1.css --style compressed

嘛，其实很简单，就是在原来编译指令的后面加了 --style 输出风格

所以只要依据需求，把compact,compressed这样的参数写在--style后面就行

2.gulp编译：

gulpfile.js代码如下：

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

其实这个大家应该也能看得出来，就是在原本sass()中加了一个参数outputStyle:'编译风格'。

tips:在不指定风格的情况下，默认为嵌套输出。