昨天的文章向大家介紹 SCSS 的基礎寫法，
今天就讓我們繼續深入 SCSS 更多的寫法吧:D

正片開始

• 為了方便講解，會拿之前寫過的 CSS 來改成 SCSS 的寫法
• 本日所要改造的 CSS 在此

（共同）變數的使用

.title{
	background-color: #3f5c46;
	font-size: 16px;
    padding: 20px;
    h2{
        color: #ffffff;
    }
}
.btn{
    a{
        display: block;
        padding: 10px;
    
        background-color: #eaf0ed;
        color: #3f5c46;
        text-align: center;
        text-decoration: none;
        &:hover{
            background-color: #3f5c46;
            color: #eaf0ed;
            font-weight: bolder;
        }
    }
}

試想，如果以上畫面，
突然被設計師要求要改色系，
你會怎麼做？
一定是搜尋 #3f5c46, #eaf0ed 這 2 個色碼並將它取代掉，
可是每次都要改很多地方，
有沒有更好的方法？

有，SCSS 有共同變數的用法。
只要你在 SCSS 最前面將變數定義好，
後面使用時就直接套用變數，
因此之後變數內容有異動的話，
只要改最上面變數的值就好。

變數的用法是 $變數名稱: 值，
例如這樣：

/* Variables */
$main_color: #3f5c46;
$sub_color: #eaf0ed;
...
...
...

後面只要有用到這兩個色碼的地方變成 $變數名稱 使用：

.btn{
    a{
        display: block;
        padding: 10px;
    
        background-color: $sub_color;
        color: $main_color;
        text-align: center;
        text-decoration: none;
        &:hover{
            background-color: $main_color;
            color: $sub_color;
            font-weight: bolder;
        }
    }
}

這樣之後主色系及副色系的顏色改變，
也只需要去改

$main_color: #3f5c46;
$sub_color: #eaf0ed;

變數裡的值就好，是不是很方便呢？

拆多個 .scss 檔，讓 CSS 更加容易管理及閱讀

當頁面越來越多，CSS 就會越來越落落長，
光是前面的 CSS Reset 篇幅就不小了(大概 50 行)，
這樣要找到特定區塊的 CSS 總是要花很多時間，
有沒有什麼方法可以讓 CSS 更加簡潔易讀呢？

SCSS 提供可以 import 多檔的方法，
也就是說可以將各個頁面的 CSS 拆成不同 .scss 檔再引入即可。

例如，
先在 scss 資料夾裡面，
建立相應的 scss 檔案，命名規則為 _名稱.scss

• _reset.scss
• _variables.scss
• _index.scss
  

接著，我們把 CSS reset 的內容丟到 _reset.scss，
把變數宣告丟到 _variables.scss，
再把剩下 index.html 裡面有關的 CSS 放到 _index.scss。

然後 create 一個 all.scss 檔案，
裡面寫：

@import "reset";
@import "variables";
@import "index";

再按存檔，
此時就會發現 css 的目錄多了一個 all.css 的檔案：

其實 all.css 就是包含了 _reset.scss, _variables.scss, _index.scss 裡面的內容，
但是內容變得更加易讀好找，
也就是說，
如果我要看 CSS Reset，只要看 _reset.scss 的內容，
如果只要看變數設定，只要看 _variables.scss 就好。

最後，讓我們看看 html 改用 all.css 看看會不會有問題～

<link rel="stylesheet" href="css/all.css">

很好，大成功！

[補充]

a:hover 在 SCSS 要這樣寫：

a{
    ...
    &:hover{ // ( & 是自己的意思 )
    }
}

[Review]

今日複習的 SCSS 用法為：

• （共同）變數的使用：前面先宣告 $變數名稱: 值; 後面直接這樣使用 $變數名稱 。
• 拆多個 .scss 檔，讓 CSS 更加容易管理及閱讀：
  1. 將 CSS 內容依據功能，拆成多支 _檔名.scss 檔案
  2. create 一個 all.scss (也可以叫別的名稱)，裡面寫 @import "檔名";
     (須與第一點的檔名一致)
  3. 存檔後，Prepros 即會在 css 資料夾產生一個 all.css 的檔案

(當然 SCSS 的寫法不只這樣，待後面若有遇到就會補充說明～)

[下週規劃]

不免俗的在每週最後一天會提到下週規劃，
第一週寫了簡單的 JavaScript 程式，
第二週複習了網頁排版，
所以第三週當然是要集前兩週之大成，
要開始將網頁元素與 JavaScript 做結合了，
(大概就是如何用 JavaScript 動態控制網頁元素這樣)
敬請期待:D