关于Sass的编译风格与编译命令

Sass的编译风格并不单一，为了满足不同工程师的编码习惯和不同开发项目的实际需求，Sass人性化的提供四种不同编译风格。这篇文章将会列举出这四种编译方式，并介绍如何执行相关的编译命令。

1. 四种编译风格

（1） nested（嵌套缩进、默认风格）

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .red {
    background-color: #ff0000;
    color: #000000; }
  #main p .blue {
    background-color: #2ebcff;
    color: #878787; }

（2） expanded（展开、无缩进）

#main p {
  color: #00ff00;
  width: 97%;
}
#main p .red {
  background-color: #ff0000;
  color: #000000;
}
#main p .blue {
  background-color: #2ebcff;
  color: #878787;
}

（3） compact（紧凑、单行）

#main p { color: #00ff00; width: 97%; }
#main p .red { background-color: #ff0000; color: #000000; }
#main p .blue { background-color: #2ebcff; color: #878787; }

（4） compressed（压缩、无空格和换行）

#main p{color:#00ff00;width:97%}#main p .red{background-color:#ff0000;color:#000000}#main p .blue{background-color:#2ebcff;color:#878787}

2. 编译命令

如何在编译Sass的时候指定输出风格，有以下两种方法：

（1）方法一

在cmd里通过cd命令进入scss文件所在的路径，输入以下命令行，compressed可替换为其他编译风格，按需输入。

　Sass--style compressed test.scss test.css

（2）方法二

　 Sass--watch test.scss:test.css --style compressed

（3）两种方法的区别

以上两种命令行都能将Sass输出为指定风格，但不一样的地方在于，前者仅仅改变当次这次的编译，如果源文件有所变动需要再次编译，就会恢复之前的编译风格。而后者则有监听的意思，以后源文件的所有变动都会按设定的编译风格编译。