摘要：下面是一個(gè)簡短的說明當(dāng)我們說起，我們經(jīng)常指的是兩種事物一種預(yù)處理器和一種語言。同時(shí)，預(yù)處理器有兩種不同的語法一種縮進(jìn)語法一種語法歷史最開始，是的一部分，是一種預(yù)處理器，由開發(fā)者設(shè)計(jì)和開發(fā)。

我最近寫了很多 Sass 代碼，但是最近發(fā)現(xiàn)并不是每一個(gè)人都知道 Sass 具體是什么。下面是一個(gè)簡短的說明：

當(dāng)我們說起 Sass ，我們經(jīng)常指的是兩種事物：一種 css 預(yù)處理器和一種語言。我們經(jīng)常這樣說，“我們正在使用 Sass”，或者 “這是一個(gè) Sass mixin”。同時(shí)，Sass （預(yù)處理器）有兩種不同的語法：

Sass,一種縮進(jìn)語法

SCSS,一種 CSS-like 語法

最開始，Sass 是Haml的一部分，Haml 是一種預(yù)處理器，由 Ruby 開發(fā)者設(shè)計(jì)和開發(fā)。因?yàn)檫@樣，Sass 使用類似 Ruby的語法，沒有花括號(hào)，沒有分號(hào)，具有嚴(yán)格的縮進(jìn)，就像這樣：

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius

.my-element
    color= !primary-color
    width= 100%
    overflow= hidden

.my-other-element
    +border-radius(5px)

你可以就看到，這和CSS代碼有很大的區(qū)別！即使你是一個(gè) Sass（預(yù)處理器） 用戶，你也會(huì)發(fā)現(xiàn)這和你正在使用的有很大的差別。變量的標(biāo)志用 !，而不是$,分配符是=而不是:。非常怪異。

但是在2010年五月之前，Sass 就是這個(gè)樣子的。2010年5月，官方推出了一個(gè)全新的語法，被叫做 SCSS，意思是 Sassy CSS。這個(gè)語法帶來了對(duì) CSS 友好的語法，試圖彌合 Sass 和 CSS 之間的鴻溝。

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}

.my-other-element {
    @include border-radius(5px);
}

SCSS 和 Sass 相比更加貼近 CSS 語法。也就是說，Sass 維護(hù)者做了大量的工作，把縮進(jìn)語法中的!和=換成了 SCSS 中的 $ 和 :。

現(xiàn)在，在開始一個(gè)新項(xiàng)目時(shí)，你也許疑惑要用哪種語法。讓我們來看看兩種語法的優(yōu)劣。

雖然語法看起來怪異，但是縮進(jìn)語法有很多有趣的點(diǎn)。首先，它 更短并且更易于書寫。沒有花括號(hào)，沒有分號(hào)，你完全不需要這些東西。更好的是，你甚至不需要@mixin 或者 @include, 一個(gè)字符就足夠了：= 和 +。

同時(shí) Sass 通過嚴(yán)格的縮進(jìn)來強(qiáng)制 clean coding standards。因?yàn)橐粋€(gè)錯(cuò)誤的縮進(jìn)就會(huì)破壞整個(gè).sass文件，這使得整個(gè)代碼總是clean 和格式良好的。只有一種寫 Sass 代碼的方式：正確的方式。

但是請(qǐng)注意！縮進(jìn)在 Sass 中是有意義的。當(dāng)你縮進(jìn)了一個(gè)元素，這意味這你將它變?yōu)榱酥霸氐淖釉?。比?

.element-a
    color: hotpink

    .element-b
        float: left

以上會(huì)輸出下面的 CSS 代碼：

.element-a {
    color: hotpink;
}

.element-a .element-b {
    float: left;
}

將 .element-b 向右一格以為著它變成了 .element-a 的子元素，改變了輸出 CSS 代碼的結(jié)果。所以一定要小心你的代碼縮進(jìn)。

另外，我覺得基于縮進(jìn)的語法適合于 Ruby/Python 團(tuán)隊(duì)，而不適合 PHP/Java 團(tuán)隊(duì)。（這是值得商榷的，我也希望聽到不同的聲音）

對(duì)于初學(xué)者，SCSS 是完全和 CSS 兼容的，這意味著幾乎為零的學(xué)習(xí)曲線。SCSS語法即是：它只是加了一些功能的 CSS。當(dāng)你和沒經(jīng)驗(yàn)的開發(fā)者一起工作時(shí)這很重要：他們可以很快開始編碼而不需要首先去學(xué)習(xí)Sass。

此外，SCSS 還是 易于閱讀 的，因?yàn)樗怯姓Z義的，而不是用符號(hào)表示。當(dāng)你讀到 @mixin，你就會(huì)知道這是一個(gè) mixin 聲明；當(dāng)你看到 @include ，你就是在引用一個(gè) mixin。他并沒有用任何縮寫，當(dāng)你大聲讀出來時(shí)所有的都很明了。

還有，現(xiàn)在幾乎所有 Sass 的工具，插件和 demo 都是基于 SCSS語法來開發(fā)的。隨著時(shí)間過去，SCSS 會(huì)變成大家首選的選擇。比如，你現(xiàn)在很難找到一個(gè) Sass 縮進(jìn)語法的高亮插件，通常都只有 SCSS 的可以用。

如何選擇取決于你，但是除非你有很好的理由一定要使用縮進(jìn)的語法，我強(qiáng)烈推薦使用 SCSS 。不僅僅它很簡單，同時(shí)他也很方便。

最后請(qǐng)注意 Sass 從來沒有大寫過，無論你指的是語法或者這個(gè)語言。同時(shí)， SCSS 一直是大寫的。甚至有一個(gè)網(wǎng)站專門來提醒你這件事!

翻譯自What’s the Difference Between Sass and SCSS?