一.命令编译
新建一个文件夹，创建index.sass文件：
$color:#ccc;
$width:200px;
div{
color: $color;
width: $width;
}
$i:4;
@while $i>0 {
.myclass-#{$i}{
overflow: hidden;
}
$i:$i - 1;
}
单文件编译语法：
sass <要编译的Sass文件路径> /style.scss:<要输出CSS文件路径> /style.css
多文件编译语法：
sass sass/:css/
1.单文件编译
打开控制台，输入命令：
//在当前文件夹下编译成css
sass index.scss:index.css
此时文件夹会多出几个文件：
image.png
打开css文件，编译成功如下：
image.png
2.多文件编译
创建两个文件夹，把之前的sass文件放到sass文件夹中，复制一份。
image.png
image.png
输入命令：
//把sass文件夹下的文件编译放到css文件夹下
sass --watch sass/:css/
编译成功后 css文件夹会多出几个文件
image.png
二、GUI工具编译
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/ )
以Koala为例：
打开存放sass的文件夹，右边index.scss下面灰色的是存放编译后文件的路径
image.png
右键点击执行编译就可以了
image.png
三、自动化编译
1.Grunt编译
2.Gulp配置Sass编译
3.webpack编译
4.编辑器编译：vscode扩展安装easy sass插件
image.png
常见的编译错误
1.字符编译引起的编译错误
在Sass的编译的过程中 ,是不是支持"GBK"编码的。所以在创建Sass文件时,就需要将文件编码设置为"utf-8"
2.路径中的中文字符引起的编译错误
在项目中文件命名或者文件目录命名尽量不要使用中文字符
