之前在 Hahow 學習前端相關的課程，學了一點 Sass 的基本寫法，印象中大概學了 4 個月，後來使用純 CSS 作為開發環境，導致 Sass 被我荒廢到現在。從這件事情讓我清楚明白一個道理：「學過的東西若是沒有經常去使用，很容易就會忘記的」。所以趁這個機會學習 Sass 的基本語法，至少在我遺忘語法時，還能夠快速的找到能用來複習的筆記。
蒐集文章並且整理筆記，目標是能快速掌握 Sass 的用法。
在討論為何學 Sass 之前，先來了解什麼是 Sass ？如果你有到 Wiki【1】找定義，應該會對 Sass 有初步的概念，但是應該不知到它到底是什麼東西，簡單來說：「SASS 是 CSS 的預處理器的其中一種，預處理器可以透過編譯的方式，產生 CSS 檔案。」，可以把它想像成在 CSS 中使用 JavaScript，Sass 除了能夠少打一點程式碼之外，還能更有效的去控制 CSS 元素，例如，變數、 if 、for、mixin 等等功能，這些語法的目的，都是為了強化 CSS 的使用效率（也可以說是 CSS 的強化版）。
預處理器除了 Sass（SCSS）以外還有像是： LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS 等等可以選擇。
在學習 Sass 應該都會有這個疑問：「 Sass 和 SCSS 到底有什麼差異？」，這個問題其實要從這些預處理器的發展歷史來切入會比較好了解，從語法本身的結構來說，SCSS 的語法長的會跟 CSS 相似，其實故事是這樣的：「最一開始 Sass 的出現，是為了要解決 CSS 開發上的所遇到的困難，例如，共用的屬性值無法統一管理，於是有了變數的功能，為了解決這類的不方便，一群開發 Ruby 的工程師們開始開發 Sass 語法，而這個語法也繼承了 Ruby 的一些特性，例如不加；和｛｝等符號，以及嚴格限制縮排等等特性，雖然 Sass 簡約好用，但是在寫法上與 CSS 還是會有一些差異，於是 SCSS 誕生就是為了解決 Sass 與 CSS 之間的差異性。
關於 Sass 和 SCSS 的差異比較，可以參考這篇文章【2】。
最後，拉回到「為何學 Sass？」這個問題上，這其實偏向喜好問題；當初在學習 css 時，不同的元素要使用相同的設定時，覺得很很麻煩，除了要在不同元素打上相同的屬性之外，屬性值也沒辦法統一的管理，像是遇到顏色這種 16 進位的色碼，想同色碼要加在不同地方，要統一顏色的修改並不容易，後來知道有 Sass 的寫法，想說就直接學了．．．
額外參考：
關於在 VScode 安裝，這邊找到了一篇文章【3】的教學，我是照步驟去學習的，大致流程如下。
打開 Visual Studio Code，延伸模組（Ctrl + Shift + X）中搜尋「Live Sass Compiler」，並安裝。
新增一個 style.sass 檔案，可以加入以下程式碼。
$gray: #eee
$blue: rgb(59, 191, 206)
$margin: 16px
.demo
background: $gray
width: 100px
height: 100px
border: 2px solid $blue
padding: $margin / 2
margin: $margin / 2
建立一個 index.html，加入 Class 名稱為 demo 的 div 。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>demo-sass</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="demo"></div>
</body>
</html>
檔案準備完畢之後，在 VScode 視窗最底下的狀態列，按下Watch Sass後，這時候會得到 2 個檔案，分別為style.css.map和style.css這兩個檔案（預設檔案路徑跟你的style.sass放在相同資料夾內）。當輸出的狀態為Watching… 時，你可以更新style.sass，而style.css會同時被更新。
同場加映：（CodePen 使用 Sass）
只要修改 Settings → CSS → Sass 即可。
參考了相關的文章【4】【5】，稍微消化後整理的筆記如下。
變數的概念就好比名字，可以對應不同人的名字，比如，張三李四王五等等。Sass 用變數也可以用在管理不同元素有著相同屬性值的狀態，為了方便設定，通常變數會放在一起。
HTML：
<div class="box">123</div>
Sass ：
$black: #000
$purple: rgb(147, 25, 196)
.box
background: $purple
width: 100px
height: 100px
border: 5px solid $black
顯示結果：
對於剛接觸嵌套的人來說，很有可能會卡住（沒錯！就是我），找了 2 篇文章【6】【7】卻還沒有弄懂用法。還要再讀熟一點。
原本以為會很難，但是還能看懂的用法，簡單說就是將會重複的程式碼當作是一個區塊，使用@mixin name()將屬性和屬性值都包起來，如果要使用被@mixin的區塊，可以使用 @include name 替代。
HTML：
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Sass：（編譯前）
$black: #000
$purple: rgb(147, 25, 196)
$orange: #FF8040
.container
@mixin box-stylee()
width: 100px
height: 100px
border: 5px solid $black
.box1
@include box-stylee
background: $purple
.box2
@include box-stylee
background: $orange
CSS：（編譯後）
.container .box1 {
width: 100px;
height: 100px;
border: 5px solid #000;
background: rgb(147, 25, 196);
}
.container .box2 {
width: 100px;
height: 100px;
border: 5px solid #000;
background: #FF8040;
}/*# sourceMappingURL=style.css.map */
顯示結果：
之前在上線上課程時，學習了 Sass 的用法，剛開始接觸 Sass，我還以為它是要拿來取代 JavaScript 的語法，畢竟像是變數、for loop 都有了，但實際上並沒有取代 JavaScript；雖然 Sass 的寫法很乾淨、很簡潔，但是它卻有一個致命的缺點，就是語法容易忘記（應該是我自己的問題），因此，將學過的 Sass 語法寫在這裡，方便日後查閱。
學習 Sass 時發現會被卡在一些地方，比如說嵌套這部分，它雖然很實用，但是在學習時，若有一個環節沒弄懂就會卡住，建議多做幾個例子，看能不能加深印象。
iThome鐵人賽
看影片追技術