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

    因为每个前端工程师编写代码的风格都不太一样，所以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:在不指定风格的情况下，默认为嵌套输出。