昨天寫完才想到忘記說必須在副檔名 .scss 的檔案內撰寫 SCSS 才行。
大概是這樣

檔名前面用 _ 符號表示在打包時不會被編譯成 CSS 檔案，多用於在需要時引入專案中。

好的，以上是昨天的忽略，接下來就進入正題吧!

SCSS 變數

一看到這個詞彙，大部分剛接觸前端開發的人就會想說:「奇怪?不是正常打出自己要的樣式就好了嗎?感覺多學這些東西也太麻煩了吧= =。我的網頁能把樣式渲染出來，排版都乖乖地這樣應該就行了吧?算了，這也太麻煩了，先專注在 JavaScript 就好...」

假如有以上想法閃過腦中的，恭喜你，從今天開始我們就是同伴了!

不過對於已經開始著手一些專案的人來說這就是必須理解的功能了。

以顏色為例，首先一個網站必定不能五顏六色，一定會有1個主色搭配1~2個的配色。因此我們會在開發的過程中，會大量重複使用一樣的顏色。如此一來，當某天 PM 跟你說:「那個...客戶說還是藍色比較好看」時，你只需要修改變數內儲存的色碼即可。

以 $ 符號當作開頭，接著輸入你的變數名稱，在賦予它 CSS 屬性的值即可。

這段程式碼是筆者之前專案的變數內容節錄。

從圖中可以看出都是經常需要使用的 CSS 的內容，
設定好後就直接使用。

以上面的顏色區塊部分，假如我們要插入主色調

.box {
    background-color: $primary;
}

直接插入變數名稱，就能把色碼帶入。

變數注意事項

1. 設定變數時需要以分號結尾。
2. 程式碼由上到下，所以變數要放在最上面。
3. 變數能支援運算。
4. 變數值為字串時需要使用引號。

另外，SCSS 也能支援 Sass 的 function(畢竟是同語言下的另類寫法嘛~
筆者常用的是顏色的 function，

1. darken(變數名稱, 變暗%);
2. lighten(變數名稱, 變亮%);

兩種 function 都有兩個參數，需帶入的值就如同上述內容，淺顯易懂。當然還有其他更多 function 等著大家發現喽~~

上面都是以顏色做為示範，但其實也會針對文字大小、字型、圖片資料夾路徑、網頁寬度、格線系統等去做撰寫，只是從顏色比較好入門而已~

變數的應用很廣，整體而言，熟練變數會對專案開發速度加快。明天要介紹的 mixin 也是個需要熟練，但熟練的話能加快開發速度的東西，盡請期待喽~