前言：

前兩天打算清理電腦的時候，遇到了一點特殊的問題，打算重裝一些東西，其中就有我一直用的順手的SASS預編譯工具。 但是在重裝的時候，我發現我居然不會用了？？？ 靠，要不是我用了半年的Sass,我真以為我這個垃圾的切圖仔用了個假的sass。 這里整理一下安裝的過程，排除掉安裝中遇到的坑，同時也細數一下sass的用法和好處，如有不足之處，歡迎指正和留言；

當然，如果要看更準確的，歡迎直接：www.sass.hk/install/

以下僅僅是我個人的整理筆記，為了改掉我早期不愛寫筆記的壞毛病。

這些內容是基于我自己的理解，整理出的模式，目的是為了交流和回憶，這些都是留給我以后填坑用的，如果要是有興趣，歡迎指正。

---

安裝過程

下載準備：

這里放上ruby：www.ruby-lang.org/en/download… 有能力的朋友可以直接用命令行下，這時候的我還不太會命令行工具。。

安裝ruby環境：

Q：肯定有人會問，這里為什么要先裝ruby這個東西，這是什么東西？

A:這里稍微解釋一下，這個一個編程工具，sass就是基于ruby編譯出來的一個工具，至于他有什么好處，有什么特殊的地方，這些你統統不要了解，他的存在就是為sass提供一個運行環境而已；

安裝sass文件：

我是window系統，所以，打開CMD命令行，然后什么都不要做，直接輸入以下命令：

gem  install sass
復制代碼

完成后：

題外話：

安裝的方式并非是絕對我這一種，但是目前這是我自己試過最穩妥的方式，如果你用過nodejs的話，那么可以走node路徑下載，有了vpn的話，甚至比我這種方式還快；

---

Sass的優點：

• 可以計算：

• 變量定義：

• 嵌套寫法：

• 繼承用法：

個人觀點： 以上基本上是我在sass使用過程中最直觀的感受，尤其是嵌套和繼承，這兩個可能新人剛開始用的時候，會覺得不是那么好用，但是用久了，你就會發現，這真是好用，比起CSS那種重復寫法真是省事太多了； 可以計算還有定義變量這兩種用法，也相當好用，畢竟很多時候，我是真的懶得去一個個改頁面中的那些數據；

---

Sass的編譯風格:

這一段引用自blog.csdn.net/u013034014/…。

早期對官方那種較為死板的說明方式很是不喜，所以錯過了官方那種明白的教程，走了很長時間的彎路。

彎路走了很多，不過，最終應該也是走到了正路上了，靠著這篇博客，我也算是把SASS最后這段彎路給補全了吧。。。。

希望各位新人在學習的時候，盡可能的多看各種官方文檔，畢竟，沒有比官方文檔更正確的了。。

因為每個前端工程師編寫代碼的風格都不太一樣，所以Sass的編譯也非常人性化的提供了不同風格的編譯方式，主要分為4種

• 嵌套輸出 nested
• 展開輸出 expanded
• 緊湊輸出 compact
• 壓縮輸出 compressed

肯定有人疑惑，這四種方式到底是什么意思，后邊的英文又是做什么的，那么，話不多說，直接進入正題吧。

CSS源碼：

nav {  ul {  margin: 0;  padding: 0;  list-style: none;  }  li { display: inline-block; }  a {  display: block;  padding: 6px 12px;  text-decoration: none;  }  
} 
復制代碼

1.嵌套輸出 nested:

nav ul {  margin: 0;  padding: 0;  list-style: none; }  
nav li {  display: inline-block; }  
nav a {  display: block;  padding: 6px 12px;  text-decoration: none; } 
復制代碼

這是默認的風格，我一開始不知道怎么調的時候，很是傷腦筋，總覺得這個默認風格特別傻，并不是特別好用。

2.展開輸出 expanded：

nav ul {  margin: 0;  padding: 0;  list-style: none;  
}  
nav li {  display: inline-block;  
}  
nav a {  display: block;  padding: 6px 12px;  text-decoration: none;  
}  
復制代碼

這是我以前傻寫CSS常用的編寫方式，看著非常舒服和習慣，如果要是預編譯給我自己看的話，我用的就是這種方式。

3.緊湊輸出 compact

nav ul { margin: 0; padding: 0; list-style: none; }  
nav li { display: inline-block; }  
nav a { display: block; padding: 6px 12px; text-decoration: none; }  
復制代碼

這個也就是所謂的單行CSS格式啦，還是有不少人喜歡這個風格的。。話說，這種傻屌的用法真的不怕自己眼睛不夠用嗎。。。我真的是覺得這個用法比較瞎眼。。。

4.壓縮輸出 compressed：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}  
復制代碼

也就是變成了壓縮之后的CSS代碼，去掉了所有的空格和換行。如果是特別巨大的頁面工程，推薦使用這個編碼風格。

這里稍微解釋一下，為什么說這種風格適合大的頁面工程：

首先，空行和空格，這兩樣在CSS樣式中，在載入渲染的時候，會占有一定的資源的。

也許，這在簡單的頁面沒有什么感覺。但是，對于那種上萬行CSS樣式的項目來說，這就很要命了，就算一個空行消耗的時間可以忽略，那上萬行下來的時間傻子也能看出來不對勁。

所以，這樣壓縮便有了以下的優勢：

• 1、減小了文件的體積
• 2、減小了網絡傳輸量和帶寬占用
• 3、減小了服務器的處理的壓力
• 4、提高了頁面的渲染顯示的速度

---

Sass四種編譯風格的實現方法：

首先，先說明一點，實現的方式并非只有一種，但是在經歷了koala的崩盤后，我對外部工具已經不是很信任了，也許這些可視化工具讓sass編譯的過程顯得很輕松易懂，但是一旦出了問題，可就不是那么輕松易懂了，所以我個人推薦還是用命令行來編輯，還是命令行這玩意靠譜。。

所以，以下只介紹一種編譯方式：命令行編譯，其余的方式自行上官網了解吧。SASS中文網：www.sass.hk/install/

還有之前那位大佬的博客，這里也貼一下：blog.csdn.net/u013034014/…

固有格式

sass --watch SASS文件名.scss:想要的CSS文件名.css --style 四種方式中你想要的輸出風格
復制代碼

以壓縮編譯為例：

sass --watch style1.scss:style1.css --style compressed
復制代碼

好吧，其實很簡單，就是在原來編譯指令的后面加了 --style 輸出風格

所以只要依據需求，把compact,compressed這樣的參數寫在--style后面就行

結語：

以上就是對SASS的梳理了，用了這么就，對于SASS的使用，還是略有一點心得的，說起來慚愧，這么長時間了，這恐怕是我唯一用的熟手的東西了。

但是這段時間在見識了各路大佬那恐怖的學習速度后，我不認為我這點熟手的東西有什么值得自豪的，也許只是一兩天就能弄明白的東西吧。

如果我上邊說的有什么不對的地方，還請指教，最后，在這里謝過了。