博客原文
前言
該中文手冊是我在Sass中文文檔的基礎(chǔ)上編輯的淹禾，或者也可以理解為就是Sass中文文檔的翻版鸭蛙。之所以有這篇文章的原因還是在于Sass中文文檔并沒有全部翻譯成中文，這樣每次我查找文檔的時候又需要對其再理解一次登下，與其如此，不如我自己完善這份文檔，并且加上一些我自己的理解或者注解被芳，這樣以后我查閱的時候可以更好的使用該份文檔缰贝。同時，我將這篇文章公開出來畔濒，當(dāng)然剩晴，如果喜歡看原文的可以去Sass官網(wǎng)看中文文檔，這完全沒有問題侵状，不可否認赞弥，那才是正版，我只是希望我寫的東西能幫助到讀者趣兄，僅此而已绽左。
考慮到寫成一篇整體篇幅太大，因此將中文手冊分成兩篇艇潭，這篇只是大概對Sass進行介紹拼窥，下篇才是具體的語法。
大綱
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 的擴展伐割，讓 CSS 語言更強大候味、優(yōu)雅。 它允許你使用變量隔心、嵌套規(guī)則白群、 mixins、導(dǎo)入等眾多功能硬霍， 并且完全兼容 CSS 語法帜慢。 Sass 有助于保持大型樣式表結(jié)構(gòu)良好， 同時也讓你能夠快速開始小型項目唯卖， 特別是在搭配 Compass 樣式庫一同使用時粱玲。
個人理解：
SASS的出現(xiàn)其實就是換一種方式寫CSS，讓CSS的編寫過程更傾向于一種工程而不是僅僅是樣式表拜轨，或者正如其名字一樣抽减，很棒的具有語法的樣式表。
2橄碾、為什么使用Sass?
首先卵沉，Sass本質(zhì)上其實就是CSS,只不過使用的方式不同于普通css罷了;其次颠锉，Sass在 CSS 語言基礎(chǔ)上添加了擴展功能(比如變量、嵌套 (nesting)史汗、混合 (mixin)等等)琼掠。
總而言之，Sass在css的基礎(chǔ)上,讓css變得可讀寫性更好停撞，使用更加方便眉枕，對項目的工程化更加友好。
3怜森、Sass和SCSS的區(qū)別和聯(lián)系
Sass 有兩種語法。
第一種被稱為 SCSS (Sassy CSS)谤牡，是一個 CSS3 語法的擴充版本副硅。
也就是說，所有符合 CSS3 語法的樣式表也都是具有相同語法意義的 SCSS 文件翅萤。 另外恐疲，SCSS 理解大多數(shù) CSS hacks 以及瀏覽器專屬語法，例如IE 古老的 filter 語法套么。 這種語種語法的樣式表文件需要以 .scss 擴展名培己。
第二種比較老的語法成為縮排語法（或者就稱為 "Sass"）， 提供了一種更簡潔的 CSS 書寫方式胚泌。
它不使用花括號省咨，而是通過縮排的方式來表達選擇符的嵌套層級，I 而且也不使用分號玷室，而是用換行符來分隔屬性零蓉。 很多人認為這種格式比 SCSS 更容易閱讀，書寫也更快速穷缤。使用此種語法的樣式表文件需要以 .sass 作為擴展名敌蜂。
任一語法都可以導(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的安裝我這里就不多做介紹了，因為不同的情況不同的項目乃至不同的框架引入的方式各有不同身坐。
當(dāng)然這里還是要說一個特別好用的網(wǎng)站：Sass的實驗室秸脱。這是Sass提供的網(wǎng)頁，通過這個你就可以不需要項目的前提下實驗各種Sass的語法部蛇，并且對比Sass以及由Sass編譯后的css.
5撞反、Sass的輸出樣式
雖然Sass輸出的默認CSS樣式非常好，并且反映了文檔的結(jié)構(gòu)搪花，但是品味和需求是不同的遏片，所以Sass支持其他幾種樣式嘹害。
通過設(shè)置:style選項或使用—style命令行標志，Sass允許您在四種不同的輸出樣式之間進行選擇吮便。
5.1笔呀、嵌套
嵌套樣式是默認的Sass樣式，因為它反映了CSS樣式的結(jié)構(gòu)和樣式化的HTML文檔髓需。
嵌套樣式在查看大型CSS文件時非常有用:它允許您輕松掌握文件的結(jié)構(gòu)许师，而無需實際讀取任何內(nèi)容。
每個屬性都有自己的行僚匆，但是縮進不是常量微渠。每個規(guī)則都是根據(jù)嵌套的深度縮進的。例如:
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
5.2咧擂、展開
展開是一種更典型的人工CSS樣式逞盆，每個屬性和規(guī)則占用一行。屬性在規(guī)則中是縮進的松申，但是規(guī)則沒有以任何特殊方式縮進云芦。例如:
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
5.3、緊湊
緊湊樣式比嵌套或展開樣式占用更少的空間贸桶。它還將焦點更多地吸引到選擇器舅逸，而不是它們的屬性。每個CSS規(guī)則只占用一行皇筛，其中定義了該行上的每個屬性琉历。嵌套規(guī)則彼此相鄰，沒有換行符水醋，而單獨的規(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}
