1、安裝sass

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

下一步、下一步。。。安裝完成后，開始菜單點(diǎn)擊：

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

因?yàn)槟J(rèn)的sass下載地址https://rubygems.org/被墻了，所以無法連接安裝，ping了一下可看到：

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

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

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

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

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

好，這時(shí)可以放心的運(yùn)行 gem install sass 來安裝了：

Perfect！

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

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

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

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

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

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

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

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

?

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

總結(jié)

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

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