10天精通Sass 之 Sass编译调试

“.sass”只能使用 Sass 老语法规则（缩进规则），”.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。
SASS的语法中没有大括号，对于已经习惯于CSS的前端程序员来说显得非常别扭，因此SCSS现在更加流行。与LESS相比，SASS的功能更加强大，目前应用也非常广泛，非常值得学习。
LESS和SASS为CSS的编写带来了很多方便，不过我觉得对于维护来说，他们更加友好。

SASS编译:
● 命令编译
● GUI工具编译
● 自动化编译

命令编译

单文件编译：
sass <要编译的Sass文件路径>\style.scss:<要输出CSS文件路径>\style.css
多文件编译：
sass <要编译的Sass文件路径>:<要输出的CSS文件路径>\

在编译Sass时，开启watch功能，这样只要代码又修改，就能自动检测到代码的变化，并编译成CSS。
sass –watch <要编译的Sass文件路径>\style.scss:<要输出CSS文件路径>\style.css

GUI工具编译

GUI界面编译工具，目前较为流行的主要有:
● Koala
● Compass app
● Scout
● CodeKit

自动化编译

主要使用grunt和gulp

不同样式风格的输出方法：
1. 嵌套输出方式 nested
编译时加上–style nested，如：sass –watch test.scss:test.css –style nested
2. 展开输出方式 expanded
编译时加上–style expand，如：sass –watch test.scss:test.css –style expanded
3. 紧凑输出方式 compact
编译时加上–style compact ，如：sass –watch test.scss:test.css –style compact
4. 压缩输出方式 compressed
编译时加上–style compressed，如：sass –watch test.scss:test.css –style compressed