一.命令編譯
新建一個文件夾该酗，創(chuàng)建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.單文件編譯
打開控制臺券册，輸入命令：
//在當(dāng)前文件夾下編譯成css
sass index.scss:index.css
此時文件夾會多出幾個文件：
image.png
打開css文件，編譯成功如下：
image.png
2.多文件編譯
創(chuàng)建兩個文件夾垂涯，把之前的sass文件放到sass文件夾中，復(fù)制一份航邢。
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
右鍵點擊執(zhí)行編譯就可以了
image.png
三膳殷、自動化編譯
1.Grunt編譯
2.Gulp配置Sass編譯
3.webpack編譯
4.編輯器編譯：vscode擴展安裝easy sass插件
image.png
常見的編譯錯誤
1.字符編譯引起的編譯錯誤
在Sass的編譯的過程中 ,是不是支持"GBK"編碼的操骡。所以在創(chuàng)建Sass文件時,就需要將文件編碼設(shè)置為"utf-8"
2.路徑中的中文字符引起的編譯錯誤
在項目中文件命名或者文件目錄命名盡量不要使用中文字符
