sass菜鳥教程

一、安裝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語法的時候了，我也是初學者，共同進步吧。