官方網站：http://sass-lang.com/

Sass 是以 Ruby 所編寫的編譯器，也是一種 CSS 的擴展語法， Sass 編譯器能將 Sass 及 Scss 檔轉譯為 CSS 檔，就像 CoffeeScript 需要先轉譯成 JavaScript 一樣，瀏覽器看到你直接餵了 Sass 檔給它吃，它可是會嚇個半死呢！

前面提到，Sass 編譯器看得懂兩種語法： Sass 和 Scss ， Sass 是較舊的語法， Scss 是較新的，而且 Scss 內可以使用 CSS 語法，也就是說將 CSS 的語法複製到 Scss 檔內是可以編譯的，但 Sass 是用縮排取代大括號，因此直接複製 CSS 到 Sass 檔內是會錯誤的，雖然 Sass 因為省略的大括號和分號，減少了打字的次數，不過 Scss 和 原本的 CSS 寫法比較相近，又是比較新的語法，所以以下和之後的內容都會以 Scss 語法為主喔！（實際上請依各位喜好選擇 Sass 或 Scss）

其實本來是要查一下 Webpack 的 Sass 相關設定，後來就想說乾脆學一下好了，雖然我是從前端開始學習，但美感不好的我 CSS 並沒有多熟悉，不過理解一種新的語言也是一種樂趣，而且光這次的主題：巢狀結構，就已經讓寫 CSS 更像寫程式了，如果你還是重複同樣的 Class Name 在編輯 CSS 檔，強烈建議抽空學習一下 Sass ，對常常在編寫 CSS 的開發者可是受用無窮的喔！

安裝 Sass

因為 Sass Compiler 是基於 Ruby 語言所開發的，所以安裝 Rudy 運行環境在電腦是第一件事，這邊因為我自己是 MAC ，已經內建了 Ruby 環境，如果和我一樣是 MAC 的話，直接執行：gem install sass就可以安裝了，其他 Windows 或 Linux 請自己參考一下官方網站吧！

基礎指令

安裝完畢之後，就可以執行sass -v來檢查一下自己是否安裝成功，以下也列出一些我們會用到的指令給各位。

顯示幫助：sass --help、sass -h
顯示版本：sass --version、sass -v
編譯到終端機：sass [Name.scss]
編譯到檔案：sass [Name.scss] [Name.css]
自動偵測並編譯：sass --watch [Name.scss]:[Name.css]或sass --watch .（後者是偵測 Terminal 當下的目錄內所有變化）

補充：給不想打指令的人研究 – Scout App

有了以上指令，大家接下來應該就可以很輕鬆地將 scss 檔 轉譯為 CSS 檔了，切記！瀏覽器看不懂sass或scss，只會css，各位接下來載入 HTML 的是 test.css 而不是 test.scss ！

巢狀結構

在 CSS 內，假設有十個 class 要 style，且每個 class 內的 <H1> 、 <H2> 、 <p> 、 <a> 都不一樣，你就必須要寫十次 .className h1 .className p ， className 要重複好幾次，且同一個 class 的元素都是獨立一個 block ，閱讀上也不是很方便， 但在 Scss 內，我們可以用巢狀結構代替這種土法煉鋼的方式來加上 style。

我們可以將屬於同一個 Class 的元素放在同一個 .className{ //... } 裡面， Sass 會幫我們 轉譯成 含有 className 的 CSS 檔，請看以下：

// scss 寫法
.navbar {
    background-color: yellow;
    h1 {
        color: blue;
    }
    button {
        margin: 0 5px;
    }
}
.blog {
    background-color: green;
    h1{
        color: gray;
    }
    button {
        margin: 10px;
        background-color: black;
    }
}

// CSS 寫法
.navbar {
    background-color: yellow;
}
.navbar h1 {
    color: blue;
}
.navbar button {
    margin: 0 5px;
}

.blog {
    background-color: green;
}
.blog h1 {
    color: gray;
}
.blog button {
    margin: 10px;
    background-color: black;
}

當然，我們也可以在 class 內放入其他 class ，標準的巢狀結構，但是建議不要用太多，用到五六層的話，那表示你可能需要新增新的 class ，或者網頁的架構上出了一點問題，畢竟巢狀結構越多層越難維護，就像 JavaScript 用了一堆巢狀 callback 的 callback hell 一樣令人頭痛呢。

// scss 寫法
.navbar {
    background-color: black;
    .leftSide {
        background-color: yellow;
        button {
            color: blue;
            background-color: gray;
        }
    }
    .rightSide {
        background-color: green;
        button {
            color: pink;
            background-color: orange;
        }
    }
}

// CSS 寫法
.navbar {
    background-color: black;
}

.navbar .leftSide {
    background-color: yellow;
}

.navbar .leftSide button {
    color: blue;
    background-color: gray;
}

.navbar .rightSide {
    background-color: green;
}

.navbar .rightSide button {
    color: white;
    background-color: orange;
}