sass @import（sass的几种输出格式，你都知道吗）

时间2025-05-04 02:10:55分类IT科技浏览4625

导读：输出格式说明 Sass编译输出的CSS格式可以自定义。...

输出格式说明

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 – 展开格式

compact – 紧凑格式

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