首先安裝sass,先要下載ruby,因爲sass是基於ruby做的開發;
ruby地址下載鏈接,我用的是Ruby2.3.3這個版本
安裝ruby的時候記得勾選 Add Ruby executables to your PATH，直到 Ruby 安裝程序完成 Ruby 安裝爲止。如果您的安裝沒有適當地配置環境變量，接下來您可能需要進行環境變量的配置。
安裝完ruby之後,cmd終端執行,
ruby -v
如果有版本號就說明安裝成功了。之後通過命令行安裝:
gem install sass
安裝完成之後
sass -v
查看下版本號如果和ruby的版本號一樣就成功了，此刻安裝工作環境工作就準備好了。
下面就可以進行開發了,下面在編輯器中建立一個開發的文件夾，我用的編輯器是sublime text 3,在使用sublime之前,要先安裝sass的插件,不會的自行百度安裝。沒有sass和scss的格式支持,開發將無法識別進行轉譯。
我的個人文件目錄,僅供參考
在sass文件夾中建立style.scss文件
body{
font-size: 15px;
color: blue;
line-height: 1;
}style.scss寫完之後，cmd中進入代碼根目錄文件夾；我的根目錄文件集是E:\liwei-sass,在此目錄執行命令(下面做個特別的演示，以防止你弄錯目錄，後面的目錄和以下的一樣，就不做重複操作了)
E:\liwei-sass>sass sass/style.scss:sass/style.css
此時css文件夾中就會生成一個style.css的代碼，就是由scss文件編譯好的css文件。（提個醒：編譯之前css文件夾是空的，執行上面的命令之後，會自動生成對style.scss的轉移成style.css）
如果想要執行監視功能，就是保存文件之後就可以直接看見代碼編譯scss成css的效果，那就在liwei-sass處執行即可.
sass –watch sass:css
此刻,只要style.scss 輸入一個css的屬性之後,直接ctrl+s 保存,style.css的代碼就會跟着進行改變。做到了實時編譯的效果，節省開發時間、提高開發效率。
如果你覺得上面的body代碼太簡單了,根本看不出來兩者都啥區別,下面我就寫一個稍微複雜一點的,給你做參考,當你執行完這個代碼之後,理解sass的編譯就很容易了.好了不說了,直接上代碼
以下是style.scss的代碼部分:
ul{
font-size: 15px;
li{
list-style: none;
span{
text-align: center;
font-weight: bold;
}
}
}以下是編譯好之後style.css的代碼部分:
ul {
font-size: 15px; }
ul li {
list-style: none; }
ul li span {
text-align: center;
font-weight: bold; }這樣看起來是不是就知道了,sass的結構,看起來就清晰了許多吧.
爲了讓你在視覺上有明顯直觀的感覺,下面在給你介紹幾種scss的輸出格式.
nested,嵌套
expanded,擴展
compact,緊湊
compressed,壓縮
第一種nested就是上面代碼展示的那樣.這裏舉一個例子,就拿expanded來做演示.在終端執行
sass –watch sass:css –style expanded
（注：“-”是兩個,不是一個）
編譯之後,style.css顯示的效果如下:
ul {
font-size: 15px;
}
ul li {
list-style: none;
}
ul li span {
text-align: center;
font-weight: bold;
}這種css的格式你再熟悉不過了吧。其他幾個樣式如果你想看看效果，可自行執行命令即可。
sass的入門開發就是這樣,進階之路還在繼續,後期我會繼續更新文章。
有問題的話,可以郵箱聯繫我，個人郵箱：[email protected],大家一起學習,共同成長~
