Sass 與 SCSS

因爲不瞭解.sass文件和.scss文件的區別，所以找到了一篇介紹的文章，記下來方便查看。

原文地址：https://segmentfault.com/a/1190000005646206 作者：MrDream

以下是內容：

Sass 與 SCSS 是什麼關係？

2016年06月04日發佈

我最近寫了很多 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 一直是大寫的。甚至有一個網站專門來提醒你這件事! SassnotSASS.com

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

---