sass菜鳥教程

1、安裝sass

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

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

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

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

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

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

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

現有兩個，一個是默認的，一個是剛添加的淘寶的，必須要把默認的刪掉才能安裝，運行命令刪除默認：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文件名可以重新取名）：

這時再返回文件所在文件夾，你會發現多出了一些文件，其中就有我們想要的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語法的時候了，我也是初學者，共同進步吧。