介绍
说先说明一下为什么会将Sass的注解和格式化输出合在一起讲解，这两者有很大的关联，因为在格式化输出的时候会涉及到注解编译后的输出，所以我们需要联合在一起看，这样也有助于理解。
前文回顾
在“Sass简介”一章的总结中我们说过
1.Sass是一门脚本语言
2.Sass的语法规则有前后代两种方式“缩进语法”、“花括号语法”这两种语法针对的文件分别为sass,scss
既然是脚本语言就会有从sass 动态编译到 css的过程，针对编译出的css样式则会有多种格式，对于sass与scss此过程是相同的。
而在“Sass开发环境安装”一章中在我们介绍到在安装webstorm时设置的sass选项卡，有过这样一个参数设置
Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css --style expanded
--style expanded 默认是没有的，这就是用来设置化输出的格式。
输出格式
为了直观感受一下，我们在webstorm中新建名为demo.scss的文件，内容为
$width:5em;
#main {
width:$width;
}
#first{
width:$width;
}
expanded
将输出参数设置为 --style expanded 编译后的Demo.css内容格式为无压缩可用于开发的css样式
#main {
width:5em;
}
#first {
width:5em;
}
/*# sourceMappingURL=Demo.css.map */
nested
将输出参数设置为 --style nested 是Sass默认的格式
#main {
width:5em; }
#first {
width:5em; }
/*# sourceMappingURL=Demo.css.map */
compact
将输出参数设置为 --style :compact 每个样式各自一行，这里的每个样式输出格式有点类似于 ”块级元素 “了
#main {width:5em; }
#first{width:5em}
/*# sourceMappingURL=Demo.css.map */
compressed
将输出参数设置为 --style compressed ，输出的为用于生产的压缩版css样式到目前为止我们已经看完了所有sass的输出样式的所有格式
#main{width:5em}#first{width:5em}
/*# sourceMappingURL=Demo.css.map */
到目前为止我们已经看完了所有sass的输出样式的所有格式
注解
形式
1. /** */ 多行注释
2. // 单行注释
输出效果
1.多行注释 注释部分的首字符不是 ! 那么在compressed 格式输出的css样式中是不存在的，在其他格式输出的css样式中是存在的，但是如果 注释部分的首字符是 ! 那么在所有格式输出的css样式中都是存在的。一般在compressed格式的输出样式中的注释是注明版本信息。
2.单行注释只能在scss文件中显示，在所有格式的输出样式中都是不存在的。
总结
1.Sass文件编译为CSS文件的输出格式有4种各有用处，分别为 默认的 nested 、 用于开发的 expanded 、单样式单行的样式、以及用的生产环境的compressed 格式。
2.注解分为单行与多行注解
3.单行注解在各种格式输出后的CSS样式文件中都不会存在
4.多行注释如果注释部分首字符不是!那么在compressed格式中不会存在其他格式输出的CSS文件中是存在的
如果注释部分首字符是！那么在所有格式输出的CSS样式文件中都是存在的。
5.最后我将本文章的内容总结为一张思维图，方便学习
