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输出为指定风格,但不一样的地方在于,前者仅仅改变当次这次的编译,如果源文件有所变动需要再次编译,就会恢复之前的编译风格。而后者则有监听的意思,以后源文件的所有变动都会按设定的编译风格编译。