每日美图

介绍

说先说明一下为什么会将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.最后我将本文章的内容总结为一张思维图，方便学习

Sass源文件编译至Css文件