4种Sass的输出格式

输出格式说明

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

有4种输出格式：

• :nested – 音乐格式
• :expanded – 展开格式
• :compact – 简化格式
• :compressed – 压缩格式

默认格式是：嵌套。

使用风格可以设置选项或使用风格参数设置输出格式。

命令标准格式：

sass  --watch   (scss文件):(要生成的目标css文件)  --style

例如：

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

不同格式输出

我们把各种不同格式的输出，看不同输出格式的区别：

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;    }}

嵌套 – 格式

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; }

展开 – 展开格式

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;}

紧凑格式——多格式

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; }

压缩 – 压缩格式

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}

总结

通过观察不同的输出格式，可以将结果格式设置为发布格式，压缩转出的文件是最小开发的，所以该格式通过项目时更好地组合，通过设置为阶段格式可以为紧凑，也可以设置，根据自己的心情来设置。

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

学习更多技能

请点击下方公众号