博客原文
前言
該中文手冊是我在Sass中文文檔的基礎(chǔ)上編輯的，或者也可以理解為就是Sass中文文檔的翻版。之所以有這篇文章的原因還是在于Sass中文文檔并沒有全部翻譯成中文，這樣每次我查找文檔的時(shí)候又需要對其再理解一次，與其如此，不如我自己完善這份文檔，并且加上一些我自己的理解或者注解，這樣以后我查閱的時(shí)候可以更好的使用該份文檔。同時(shí)，我將這篇文章公開出來，當(dāng)然，如果喜歡看原文的可以去Sass官網(wǎng)看中文文檔，這完全沒有問題，不可否認(rèn)，那才是正版，我只是希望我寫的東西能幫助到讀者，僅此而已。
考慮到寫成一篇整體篇幅太大，因此將中文手冊分成兩篇，這篇只是大概對Sass進(jìn)行介紹，下篇才是具體的語法。
大綱
1、什么是Sass?
2、為什么使用Sass?
3、Sass和SCSS的區(qū)別和聯(lián)系
4、Sass的安裝和使用
5、Sass的輸出樣式
1、什么是Sass?
Sass (Syntactically Awesome StyleSheets)
CSS(Cascading Style Sheets)(層疊樣式表)
Sass 是對 CSS 的擴(kuò)展，讓 CSS 語言更強(qiáng)大、優(yōu)雅。 它允許你使用變量、嵌套規(guī)則、 mixins、導(dǎo)入等眾多功能， 并且完全兼容 CSS 語法。 Sass 有助于保持大型樣式表結(jié)構(gòu)良好， 同時(shí)也讓你能夠快速開始小型項(xiàng)目， 特別是在搭配 Compass 樣式庫一同使用時(shí)。
個(gè)人理解：
SASS的出現(xiàn)其實(shí)就是換一種方式寫CSS，讓CSS的編寫過程更傾向于一種工程而不是僅僅是樣式表，或者正如其名字一樣，很棒的具有語法的樣式表。
2、為什么使用Sass?
首先，Sass本質(zhì)上其實(shí)就是CSS,只不過使用的方式不同于普通css罷了;其次，Sass在 CSS 語言基礎(chǔ)上添加了擴(kuò)展功能(比如變量、嵌套 (nesting)、混合 (mixin)等等)。
總而言之，Sass在css的基礎(chǔ)上,讓css變得可讀寫性更好，使用更加方便，對項(xiàng)目的工程化更加友好。
3、Sass和SCSS的區(qū)別和聯(lián)系
Sass 有兩種語法。
第一種被稱為 SCSS (Sassy CSS)，是一個(gè) CSS3 語法的擴(kuò)充版本。
也就是說，所有符合 CSS3 語法的樣式表也都是具有相同語法意義的 SCSS 文件。 另外，SCSS 理解大多數(shù) CSS hacks 以及瀏覽器專屬語法，例如IE 古老的 filter 語法。 這種語種語法的樣式表文件需要以 .scss 擴(kuò)展名。
第二種比較老的語法成為縮排語法（或者就稱為 "Sass"）， 提供了一種更簡潔的 CSS 書寫方式。
它不使用花括號，而是通過縮排的方式來表達(dá)選擇符的嵌套層級，I 而且也不使用分號，而是用換行符來分隔屬性。 很多人認(rèn)為這種格式比 SCSS 更容易閱讀，書寫也更快速。使用此種語法的樣式表文件需要以 .sass 作為擴(kuò)展名。
任一語法都可以導(dǎo)入另一種語法撰寫的文件中。 只要使用 sass-convert 命令行工具，就可以將一種語法轉(zhuǎn)換為另一種語法：
# 將 Sass 轉(zhuǎn)換為 SCSS
$ sass-convert style.sass style.scss
# 將 SCSS 轉(zhuǎn)換為 Sass
$ sass-convert style.scss style.sass
4、Sass的安裝和使用
Sass的安裝我這里就不多做介紹了，因?yàn)椴煌那闆r不同的項(xiàng)目乃至不同的框架引入的方式各有不同。
當(dāng)然這里還是要說一個(gè)特別好用的網(wǎng)站：Sass的實(shí)驗(yàn)室。這是Sass提供的網(wǎng)頁，通過這個(gè)你就可以不需要項(xiàng)目的前提下實(shí)驗(yàn)各種Sass的語法，并且對比Sass以及由Sass編譯后的css.
5、Sass的輸出樣式
雖然Sass輸出的默認(rèn)CSS樣式非常好，并且反映了文檔的結(jié)構(gòu)，但是品味和需求是不同的，所以Sass支持其他幾種樣式。
通過設(shè)置:style選項(xiàng)或使用—style命令行標(biāo)志，Sass允許您在四種不同的輸出樣式之間進(jìn)行選擇。
5.1、嵌套
嵌套樣式是默認(rèn)的Sass樣式，因?yàn)樗从沉薈SS樣式的結(jié)構(gòu)和樣式化的HTML文檔。
嵌套樣式在查看大型CSS文件時(shí)非常有用:它允許您輕松掌握文件的結(jié)構(gòu)，而無需實(shí)際讀取任何內(nèi)容。
每個(gè)屬性都有自己的行，但是縮進(jìn)不是常量。每個(gè)規(guī)則都是根據(jù)嵌套的深度縮進(jìn)的。例如:
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
5.2、展開
展開是一種更典型的人工CSS樣式，每個(gè)屬性和規(guī)則占用一行。屬性在規(guī)則中是縮進(jìn)的，但是規(guī)則沒有以任何特殊方式縮進(jìn)。例如:
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
5.3、緊湊
緊湊樣式比嵌套或展開樣式占用更少的空間。它還將焦點(diǎn)更多地吸引到選擇器，而不是它們的屬性。每個(gè)CSS規(guī)則只占用一行，其中定義了該行上的每個(gè)屬性。嵌套規(guī)則彼此相鄰，沒有換行符，而單獨(dú)的規(guī)則組之間有換行符。例如:
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
5.4、壓縮
壓縮樣式占用盡可能少的空間，除了分隔選擇器和文件末尾的換行符所必需的空白之外，沒有其他空白。它還包括一些其他的小壓縮，例如為顏色選擇最小的表示。這并不是為了讓人讀懂。例如:
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
