在開始進入切版前可以先把變數的檔案建立起來，之後就可以在各個地方使用，
這邊可以給一些我自己在 _variables.scss 裡面會放什麼內容的參考～

|- variable
|--- 01 color （顏色)
|--- 02 font setting (文字)
|--- 03 screen width (RWD中要多少個degree 的screen width )
|--- 04 space
|--- 05 radius

01 color

顏色的部分又可以分為以下幾個子分類，基本上可以注意的是，
顏色的變數命名可以盡量不要直接以該顏色命名，除非就一定講這個顏色，不會改變
(eg. color-white 都只白色、color-grey 都講灰色）
如主色為藍色的網站，撰寫scss主色變數，如果直接命名為 color-blue：blue，
到時候要更換主色變成粉色的時候，就會變成 color-blue: pink (明明寫的是藍色，但實際顏色是粉色)
所以建議變數名稱，可以盡量以功能為命名：
如：主色 color-main；輔色 color-sub .. etc

// ======  01 color  ======

// 01-1. grey  (灰色系 通常一個網站也會有多種)
$color-grey1: #414141; 
$color-grey2: #767676;
$color-grey3: #C2C2C2;

// 01-2. color of main/sub  (主輔色)
$color-main: #007D8C;  // CI Color
$color-sub:  #224d9b;  // sub color

// 01-3.background color （背景色)
$bg-color-main: #003781;
$color-bg: #f8f8f8;

// 01-4. hightlight color (其他獎掉裝飾色)
$color-light1: #3da556;
$color-light2: #F86200;

// 01-5. action color  (行動顏色 eg. alert的顏色, error的顏色）
$color-alert: #F1C8D0; // light pink
$color-error: #DC3149; // light red

//01-6. color common use  (常用顏色 白 / 黑)
$color-white: #fff;
$color-black: #000;

//01-7. other color   (基本元件的固定顏色 eg. link, font color)
$color-link: #00a7ea;
$color-font: $color-grey1;

02 Font Setting

文字的部分，包含

1. 字體
2. 字距
3. 行距
   這些應該都會有一個全站統一個數值，可以作為變數，後續使用。
   另外建議文字的部分，使用rem來做單位，不要直接使用px，
   若後續遇到有文字大中小的部分，也會比較容易，直接改body的基礎base即可

// 02-1 font basic setting
$font-family: '微軟正黑體';
$font-line-height: 28px;
$letter-space: 0.2px;

// 02-2 font base  when text sm : base = 16 ; text md : base = 18; text lg : base = 20
$font-base-num: 16;
$font-base-num-md: 18;
$font-base-num-lg: 20;
$font-size-md: 1rem; //16px

// 02-3 font size normal
$font-size-h6:    $font-size-md*(20/$font-base-num); //20px
$font-size-h7:    $font-size-md*(18/$font-base-num); //18px
$font-size-h8:    $font-size-md; // 16px
$font-size-h9:    1rem * (14/$font-base-num); // 14px
$font-size-h10:   $font-size-md *(12/$font-base-num); //12px

03 screen width

可以依據專案，了解專案的螢幕解析度需要訂到範圍有哪些，定義變數，
如支援mobile到iphone5的尺寸320, 一般iphone尺寸的375px， pad直板橫板 768px 1024px, 桌機，那就要這些就可以定義成變數，在撰寫 @media query的時候可以直接使用，
一方面後續如果要調整支援程度也比較容易，另一方面也比較統一在撰寫media query的尺寸，而不是想到多少就填一個數字

// ====== 03 screen width  ======
$screen-desktop:         1200px;
$screen-sm-than-desktop: 1199px;
$screen-pad-pro:         1366px;
$screen-lg-than-nb:      1025px;
$screen-nb:              1024px;
$screen-sm-than-nb:      1023px;
$screen-lg-pad:          992px;
$screen-lg-than-pad:     769px;
$screen-pad:             768px;
$screen-sm-than-pad:     767px;
$screen-lg-mobile:       500px;
$screen-mobile:    	     375px;
$screen-sm-than-mobile:  374px;
$screen-sm:              320px;

04 space

全站的間距規則變數。在一個設計完整的專案，對於間距應該要有一定的規則，在這邊會把固定的規則定義成變數。
如：在pad直版的時候，固定左右間距20px；在手機版的時候，固定左右間距10px

// 04-1 space about layout left and right
$space-layout-pc: 40px;
$space-layout-nb: 40px;
$space-layout-pad: 20px;
$space-layout-mobile: 10px;
$space-layout-mobile-sm: 5px;

05 radius

全站的圓角。一般來說全站的圓角應該也不會有太多種（設計有符合一致性的話）
如果之後要調整應該也是要統一處理，所以也會把圓角的部分抽出，變成變數

$radius-lg: 25px; // large radius, use in button..
$radius-sm: 5px; //  small radius, use in card backgound..

定義變數有可能是邊做邊新增，不太可能一次到位。（畢竟邊做才會發現更多有重覆的地方)
時機大概就是：但當你發現你的數值有多個地方重覆的時候，這時候就可以考慮把它變成變數囉。
這邊指的變數是指全站都會用到的共用變數 - 全域變數 (helper/_variable.scss)
或如果只有單一項目會用到(eg. 按鈕的icon到文字間距）比較屬於區域變數，直接寫在該項目(eg.button.scss)即可