前言：

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

當(dāng)然，如果要看更準(zhǔn)確的，歡迎直接：www.sass.hk/install/

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

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

---

安裝過程

下載準(zhǔn)備：

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

安裝ruby環(huán)境：

Q：肯定有人會(huì)問，這里為什么要先裝ruby這個(gè)東西，這是什么東西？

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

安裝sass文件：

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

gem install sass 復(fù)制代碼

完成后：

題外話：

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

---

Sass的優(yōu)點(diǎn)：

• 可以計(jì)算：

• 變量定義：

• 嵌套寫法：

• 繼承用法：

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

---

Sass的編譯風(fēng)格:

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

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

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

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

因?yàn)槊總€(gè)前端工程師編寫代碼的風(fēng)格都不太一樣，所以Sass的編譯也非常人性化的提供了不同風(fēng)格的編譯方式，主要分為4種

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

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

CSS源碼：

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

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; } 復(fù)制代碼

這是默認(rèn)的風(fēng)格，我一開始不知道怎么調(diào)的時(shí)候，很是傷腦筋，總覺得這個(gè)默認(rèn)風(fēng)格特別傻，并不是特別好用。

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; } 復(fù)制代碼

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

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; } 復(fù)制代碼

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

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} 復(fù)制代碼

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

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

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

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

所以，這樣壓縮便有了以下的優(yōu)勢：

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

---

Sass四種編譯風(fēng)格的實(shí)現(xiàn)方法：

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

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

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

固有格式

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

以壓縮編譯為例：

sass --watch style1.scss:style1.css --style compressed 復(fù)制代碼

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

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

結(jié)語：

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

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

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

總結(jié)

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

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