簡書原文

https://www.jianshu.com/p/e82c27aa05c7

前言

該中文手冊是我在Sass中文文檔的基礎上編輯的，或者也可以理解為就是Sass中文文檔的翻版。之所以有這篇文章的原因還是在於Sass中文文檔並沒有全部翻譯成中文，這樣每次我查找文檔的時候又需要對其再理解一次，與其如此，不如我自己完善這份文檔，並且加上一些我自己的理解或者註解，這樣以後我查閱的時候可以更好的使用該份文檔。同時，我將這篇文章公開出來，當然，如果喜歡看原文的可以去Sass官網看中文文檔，這完全沒有問題，不可否認，那才是正版，我只是希望我寫的東西能幫助到讀者，僅此而已。

考慮到寫成一篇整體篇幅太大，因此將中文手冊分成兩篇，這篇只是大概對Sass進行介紹，下篇才是具體的語法。

大綱

1、什麽是Sass?
2、為什麽使用Sass?
3、Sass和SCSS的區別和聯系
4、Sass的安裝和使用
5、Sass的輸出樣式

1、什麽是Sass?

Sass (Syntactically Awesome StyleSheets)
CSS(Cascading Style Sheets)(層疊樣式表)
Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優雅。 它允許你使用變量、嵌套規則、 mixins、導入等眾多功能， 並且完全兼容 CSS 語法。 Sass 有助於保持大型樣式表結構良好， 同時也讓你能夠快速開始小型項目， 特別是在搭配 Compass 樣式庫一同使用時。

個人理解：
SASS的出現其實就是換一種方式寫CSS，讓CSS的編寫過程更傾向於一種工程而不是僅僅是樣式表，或者正如其名字一樣，很棒的具有語法的樣式表。

2、為什麽使用Sass?

首先，Sass本質上其實就是CSS,只不過使用的方式不同於普通css罷了;其次，Sass在 CSS 語言基礎上添加了擴展功能(比如變量、嵌套 (nesting)、混合 (mixin)等等)。
總而言之，Sass在css的基礎上,讓css變得可讀寫性更好，使用更加方便，對項目的工程化更加友好。

3、Sass和SCSS的區別和聯系

Sass 有兩種語法。
第一種被稱為 SCSS (Sassy CSS)，是一個 CSS3 語法的擴充版本。
也就是說，所有符合 CSS3 語法的樣式表也都是具有相同語法意義的 SCSS 文件。 另外，SCSS 理解大多數 CSS hacks 以及瀏覽器專屬語法，例如IE 古老的 filter 語法。 這種語種語法的樣式表文件需要以 .scss 擴展名。

第二種比較老的語法成為縮排語法（或者就稱為 "Sass"）， 提供了一種更簡潔的 CSS 書寫方式。
它不使用花括號，而是通過縮排的方式來表達選擇符的嵌套層級，I 而且也不使用分號，而是用換行符來分隔屬性。 很多人認為這種格式比 SCSS 更容易閱讀，書寫也更快速。使用此種語法的樣式表文件需要以 .sass 作為擴展名。

任一語法都可以導入另一種語法撰寫的文件中。 只要使用 sass-convert 命令行工具，就可以將一種語法轉換為另一種語法：

# 將 Sass 轉換為 SCSS
$ sass-convert style.sass style.scss

# 將 SCSS 轉換為 Sass
$ sass-convert style.scss style.sass

4、Sass的安裝和使用

Sass的安裝我這裏就不多做介紹了，因為不同的情況不同的項目乃至不同的框架引入的方式各有不同。
當然這裏還是要說一個特別好用的網站：Sass的實驗室。這是Sass提供的網頁，通過這個你就可以不需要項目的前提下實驗各種Sass的語法，並且對比Sass以及由Sass編譯後的css.

5、Sass的輸出樣式

雖然Sass輸出的默認CSS樣式非常好，並且反映了文檔的結構，但是品味和需求是不同的，所以Sass支持其他幾種樣式。
通過設置:style選項或使用—style命令行標誌，Sass允許您在四種不同的輸出樣式之間進行選擇。

5.1、嵌套

嵌套樣式是默認的Sass樣式，因為它反映了CSS樣式的結構和樣式化的HTML文檔。
嵌套樣式在查看大型CSS文件時非常有用:它允許您輕松掌握文件的結構，而無需實際讀取任何內容。
每個屬性都有自己的行，但是縮進不是常量。每個規則都是根據嵌套的深度縮進的。例如:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

5.2、展開

展開是一種更典型的人工CSS樣式，每個屬性和規則占用一行。屬性在規則中是縮進的，但是規則沒有以任何特殊方式縮進。例如:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

5.3、緊湊

緊湊樣式比嵌套或展開樣式占用更少的空間。它還將焦點更多地吸引到選擇器，而不是它們的屬性。每個CSS規則只占用一行，其中定義了該行上的每個屬性。嵌套規則彼此相鄰，沒有換行符，而單獨的規則組之間有換行符。例如:

#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}

Sass(SCSS)中文手冊——入門