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

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

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

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

SCSS,一種 CSS-like 語(yǔ)法

最開(kāi)始，Sass 是Haml的一部分，Haml 是一種預(yù)處理器，由 Ruby 開(kāi)發(fā)者設(shè)計(jì)和開(kāi)發(fā)。因?yàn)檫@樣，Sass 使用類(lèi)似 Ruby的語(yǔ)法，沒(méi)有花括號(hào)，沒(méi)有分號(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è)全新的語(yǔ)法，被叫做 SCSS，意思是 Sassy CSS。這個(gè)語(yǔ)法帶來(lái)了對(duì) CSS 友好的語(yǔ)法，試圖彌合 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 語(yǔ)法。也就是說(shuō)，Sass 維護(hù)者做了大量的工作，把縮進(jìn)語(yǔ)法中的!和=換成了 SCSS 中的 $ 和 :。

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

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

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

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

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

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

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

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

最后請(qǐng)注意 Sass 從來(lái)沒(méi)有大寫(xiě)過(guò)，無(wú)論你指的是語(yǔ)法或者這個(gè)語(yǔ)言。同時(shí)， SCSS 一直是大寫(xiě)的。甚至有一個(gè)網(wǎng)站專(zhuān)門(mén)來(lái)提醒你這件事!

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