输出格式说明
Sass编译输出的css格式可以自定义。

有4种输出格式：

:nested – 嵌套格式
:expanded – 展开格式
:compact – 紧凑格式
:compressed – 压缩格式
默认格式是:nested。

可以使用:style选项或使用style命令行参数设置输出格式。

命令标准格式：

sass –watch (scss文件):(要生成的目标css文件) –style (输出格式)
例如：

sass –watch index.scss:index.css –style compressed

不同格式输出
接下来我们把如下的css经过不同格式的编译，蓝狮注册登陆看不同输出格式的区别：

html{
font-size: 12px;
color: #333;
}
.container{
font-size: 14px;
.header{
width: 50%;
height: 30px;
.left{
float: left;
}
}
.footer{
background-color: green;
}
&::after{
display: inline-block;
}
}
nested – 嵌套格式
html {
font-size: 12px;
color: #333; }

.container {
font-size: 14px; }
.container .header {
width: 50%;
height: 30px; }
.container .header .left {
float: left; }
.container .footer {
background-color: green; }
.container::after {
display: inline-block; }
expanded – 展开格式
html {
font-size: 12px;
color: #333;
}

.container {
font-size: 14px;
}

.container .header {
width: 50%;
height: 30px;
}

.container .header .left {
float: left;
}

.container .footer {
background-color: green;
}

.container::after {
display: inline-block;
}
compact – 紧凑格式
html { font-size: 12px; color: #333; }

.container { font-size: 14px; }

.container .header { width: 50%; height: 30px; }

.container .header .left { float: left; }

.container .footer { background-color: green; }

.container::after { display: inline-block; }
compressed – 压缩格式
html{font-size:12px;color:#333}.container{font-size:14px}.container .header{width:50%;height:30px}.container .header .left{float:left}.container .footer{background-color:green}.container::after{display:inline-block}

总结
通过观察不同的输出格式可以看出，compressed – 压缩格式 转出的文件是最小的，蓝狮官网所以该格式通过为项目发布时设置的格式，开发阶段为了更好地观察编译结果，通过设置为expanded – 展开格式，也可以设置为compact – 紧凑格式，根据自己的喜好来。

这就是sass的四种转出格式的详细介绍。