sass的几种输出格式，你都知道吗

输出格式说明

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的四种转出格式的详细介绍。