分類: Sass
Sass 學習筆記（二） – 變數
Sass 除了能讓我們寫巢狀結構外，還能夠定義變數，非常簡單，以下範例大家應該可以很快能理解 Sass 變數的用法！
// 不使用變數
.header a {
color: blue;
}
.menu a {
color: #666;
}
.nav a {
color: blue;
}
.footer a{
color: #666;
}
Sass 學習筆記（一） – 安裝與巢狀結構
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 的開發者可是受用無窮的喔！