1、安裝sass

在安裝sass前需要安裝ruby，下載ruby時要注意自己電腦是32位還是64位，下載好正常安裝，但注意一下：要勾選下圖這一項，添加環(huán)境變量（安裝過JDK的朋友應該知道環(huán)境變量）

下一步、下一步。。。安裝完成后，開始菜單點擊：

輸入命令：gem install sass 。我猜你會看到安裝失敗的提醒：

因為默認的sass下載地址https://rubygems.org/被墻了，所以無法連接安裝，ping了一下可看到：

可我“翻”了一下“墻”，發(fā)現(xiàn)還是不能成功安裝，只好作罷，換一個下載地址，淘寶的：https://ruby.taobao.org/ 。 ping一下正常：

接下來要做的就是添加國產(chǎn)淘寶的地址，并把默認被墻掉的地址刪除，輸入命令： gem sources -a https://ruby.taobao.org/添加淘寶地址：

提示信息有added to sources表示添加成功，可運行命令：gem sources 查看現(xiàn)有的下載地址：

現(xiàn)有兩個，一個是默認的，一個是剛添加的淘寶的，必須要把默認的刪掉才能安裝，運行命令刪除默認：gem sources -r https://rubygems.org/ ?提示removed from sources 說明刪除成功。

確保只有一個淘寶的地址，才能成功安裝sass：

好，這時可以放心的運行 gem install sass 來安裝了：

Perfect！

2.把scss文件編譯為css文件

先新建一個.scss文件吧，代碼：（雖然sass代碼剛寫起來生硬，但相信代碼還是能看懂啥意思的）

.box {background: #eee;border: 2px solid #ccc;.heading {font-size: 14px;} }.box2 {@extend .box;padding: 10px; }

我這里保存為test.scss文件，然后用命令行進入保存文件的所在目錄（我的是E盤ts文件夾下），然后運行翻譯命令： sass test.scss ?test.css ?把test.scss文件編譯為test.css文件（css文件名可以重新取名）：

這時再返回文件所在文件夾，你會發(fā)現(xiàn)多出了一些文件，其中就有我們想要的test.css文件：

打開test.css文件我們會看到編譯好的css代碼，對比編譯前scss文件源代碼可看出sass的厲害之處啦：

.box, .box2 {background: #eee;border: 1px solid #ccc; } .box .heading, .box2 .heading {font-size: 2em; } .box2 {padding: 10px; }/*# sourceMappingURL=test.css.map */

當然了你也可以把css文件編譯為scss文件，輸入命令： sass -convert test.css newtest.scss 就能把test.css編譯為newtest.scss文件啦，這里就不再贅述。下面就是要學習sass語法的時候了，我也是初學者，共同進步吧。

?

轉(zhuǎn)載于:https://www.cnblogs.com/chayangge/p/4359123.html

總結

以上是生活随笔為你收集整理的sass菜鸟教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。