sass的语法格式
sass有两种语法格式：
- sass语法格式（老版本sass语法格式）
- 文件后缀名为
.sass - 通过tab键严格控制缩进的一种语法形式
- 不带
{}和;
eg:
$color:#333
body
font-size:14px
color:$color
- scss语法格式（新的sass语法格式）
- 文件后缀名为
.scss - 类似于css的书写方式
eg:
$color:#333;
body{
font-size:14px;
color:$color;
}
sass编译
sass命令行编译
单文件编译：
sass input.scss:output.css（将input.scss文件编译为output.css）多文件编译：
sass sass:css(将sass目录下所有.scss文件编译到css目录下，生成相应的.css文件)-
上面的命令，只能进行一次编译，每当你对
scss文件修改之后，必须重新执行编译，十分麻烦。在实际开发当中，我们可以使用watch命令对源文件进行监听，每当源文件发生改变，sass会自动进行编译// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch sass:css
sass图形化工具编译
- Koala (http://koala-app.com/)
- Compass.app（http://compass.kkbox.com/）
- Scout（http://mhs.github.io/scout-app/）
- CodeKit（https://incident57.com/codekit/index.html）
- Prepros（https://prepros.io/）
SASS提供四个编译风格的选项：
- nested：嵌套输出方式，它是默认值。(闭合大括号不会另起一行)
- expanded：展开输出方式。(闭合大括号另起一行)
- compact：紧凑输出方式。（大括号和css代码在同一行）
- compressed：压缩输出方式。（压缩格式，常用于生产环境）
// 用法示例：在编译命令后面带上 `-- style *`参数
sass --watch test.scss:test.css --style nested
