Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤，因为".sass"和".scss"文件并不能直接使用<link>标签引用，最终其实还是要将他们转换成CSS文件来在项目中使用。
所以要让web页面真正使用到Sass缩写的东西，编译这个过程是必须要有的。
这里会提到3种编译方法：
1.命令行编译
顾名思义，就是通过电脑里的终端(命令行工具)通过指令来编译Sass文件（个人觉得，这种方式比较直观，但是敲命令有点麻烦）
（1）单文件编译：
sass <Sass文件的路径>/style1.cscc : <要输出的CSS文件的路径>/style1.css
这样就把固定路径下的style1.scss编译到了指定的目录下的style1.css中.
（2）多文件编译：
sass sass/:css/
这样是讲sass目录下所有的sass文件编译成css文件，并放在同级的css文件夹中。
（3）watch指令：
我们可以想象一下，如果我们编译后，又对sass文件进行了多次修改，我们就需要反复的去敲这些繁琐的指令，非常的不方便。
这时watch指令有派上了用场，在编译Sass时，开启watch功能，它就是检测Sass文件的变化，并且自动帮你编译更新后的代码：
sass --watch <上边的编译代码>
好了，命令行编译就说到这里。
2.图形化界面工具编译
嘛，懒人福音啊，不用敲繁琐的指令，麻麻再也不用担心我敲错指令了。
其实这样的工具很多，这里推介一下Koala(考拉)
官网传播门：http://koala-app.com/
w3cplus的Koala使用指南：http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html
3.自动化编译:(Grunt和Gulp)
Grunt:因为本喵现在只会用Gulp，所以这里粘一段度娘给的Grunt代码好了，需要的童鞋自取：
- module.exports = function(grunt) {
- grunt.initConfig({
- pkg: grunt.file.readJSON('package.json'),
- sass: {
- dist: {
- files: {
- 'style/style.css' : 'sass/style.scss'
- }
- }
- },
- watch: {
- css: {
- files: '**/*.scss',
- tasks: ['sass']
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-sass');
- grunt.loadNpmTasks('grunt-contrib-watch');
- grunt.registerTask('default',['watch']);
- }
接下来是Gulp:
在我的另一边文章里有写到Gulp的编译Sass等文件的方法，这里是传送门：
http://blog.csdn.net/u013034014/article/details/53559069
（本喵比较懒╮(￣▽￣")╭）
那么关于Sass编译就写到这里啦，欢迎小伙伴们一起交流
前端交流群——<a href="https://jq.qq.com/?_wv=1027&k=42OiUZ5">点击链接加入群【Magic Coder】</a>