Sass编译

1、GUI界面编译工具

① Koala
② Compass.app
③ Scout
④ CodeKit
⑤ Prepros

2、命令编译

sass <要编译的Sass文件路径> : <要输出CSS文件路径>

缺点:只能一次性编译，每次保存“.scss”文件之后，都得重新执行命令。
优点: 编译 Sass 时，开启“watch”功能，这样只要你的代码进行修改，都能自动监测到代码的变化，并且给你直接编译出来

sass --watch <要编译的Sass文件路径> : <要输出CSS文件路径>

3. 不同样式风格的输出方法

在编译的时候带上参数“ --style nested”:

sass --watch <要编译的Sass文件路径> : <要输出CSS文件路径> --style nested

① 嵌套输出方式 nested

nested.jpg

② 展开输出方式 expanded

expanded.jpg

③ 紧凑输出方式 compact

compact.jpg

④ 压缩输出方式 compressed

compressed.jpg

4. Sass的调试

在编译的时候添加**“--sourcemap” ** 参数，即可在浏览器中直接调试 Sass 文件。

sass --watch --scss --sourcemap style.scss:style.css