Sass 與 SCSS 是什麼關係？

我最近寫了不少 Sass 代碼，可是最近發現並非每個人都知道 Sass 具體是什麼。下面是一個簡短的說明：

當咱們提及 Sass ，咱們常常指的是兩種事物：一種 css 預處理器和一種語言。咱們常常這樣說，「咱們正在使用 Sass」，或者 「這是一個 Sass mixin」。同時，Sass （預處理器）有兩種不一樣的語法：

• Sass,一種縮進語法

• SCSS,一種 CSS-like 語法

歷史

最開始，Sass 是Haml的一部分，Haml 是一種預處理器，由 Ruby 開發者設計和開發。由於這樣，Sass 使用相似 Ruby的語法，沒有花括號，沒有分號，具備嚴格的縮進，就像這樣：

// 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代碼有很大的區別！即便你是一個 Sass（預處理器） 用戶，你也會發現這和你正在使用的有很大的差異。變量的標誌用 !，而不是$,分配符是=而不是:。很是怪異。

可是在2010年五月以前，Sass 就是這個樣子的。2010年5月，官方推出了一個全新的語法，被叫作 SCSS，意思是 Sassy CSS。這個語法帶來了對 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 維護者作了大量的工做，把縮進語法中的!和=換成了 SCSS 中的 $ 和 :。

如今，在開始一個新項目時，你也許疑惑要用哪一種語法。讓咱們來看看兩種語法的優劣。

Sass縮進語法的優劣

雖然語法看起來怪異，可是縮進語法有不少有趣的點。首先，它 更短而且更易於書寫。沒有花括號，沒有分號，你徹底不須要這些東西。更好的是，你甚至不須要@mixin 或者 @include, 一個字符就足夠了：= 和 +。

同時 Sass 經過嚴格的縮進來強制 clean coding standards。由於一個錯誤的縮進就會破壞整個.sass文件，這使得整個代碼老是clean 和格式良好的。只有一種寫 Sass 代碼的方式：正確的方式。

可是請注意！縮進在 Sass 中是有意義的。當你縮進了一個元素，這意味這你將它變爲了以前元素的子元素。好比:

.element-a
    color: hotpink

    .element-b
        float: left

以上會輸出下面的 CSS 代碼：

.element-a {
    color: hotpink;
}

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

將 .element-b 向右一格覺得着它變成了 .element-a 的子元素，改變了輸出 CSS 代碼的結果。因此必定要當心你的代碼縮進。

另外，我以爲基於縮進的語法適合於 Ruby/Python 團隊，而不適合 PHP/Java 團隊。（這是值得商榷的，我也但願聽到不一樣的聲音）

SCSS語法的優劣

對於初學者，SCSS 是徹底和 CSS 兼容的，這意味着幾乎爲零的學習曲線。SCSS語法便是：它只是加了一些功能的 CSS。當你和沒經驗的開發者一塊兒工做時這很重要：他們能夠很快開始編碼而不須要首先去學習Sass。

此外，SCSS 仍是 易於閱讀 的，由於它是有語義的，而不是用符號表示。當你讀到 @mixin，你就會知道這是一個 mixin 聲明；當你看到 @include ，你就是在引用一個 mixin。他並無用任何縮寫，當你大聲讀出來時全部的都很明瞭。

還有，如今幾乎全部 Sass 的工具，插件和 demo 都是基於 SCSS語法來開發的。隨着時間過去，SCSS 會變成你們首選的選擇。好比，你如今很難找到一個 Sass 縮進語法的高亮插件，一般都只有 SCSS 的能夠用。

總結

如何選擇取決於你，可是除非你有很好的理由必定要使用縮進的語法，我強烈推薦使用 SCSS 。不只僅它很簡單，同時他也很方便。

最後請注意 Sass 歷來沒有大寫過，不管你指的是語法或者這個語言。同時， SCSS 一直是大寫的。甚至有一個網站專門來提醒你這件事!

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