終於進入到介紹 SASS 特點的區塊啦～

第一個要介紹的就是大名鼎鼎的 變數 Variable 的部分，應該也能算是 SASS 最常用的方法。

變數 Variable

在變數的寫法下，我們可以將字型設定、顏色、或是任何css的資料儲存成參數，當客戶突然想要修改某個設計上的顏色~~（尤其常常發生這樣的事⸍⚙̥ꇴ⚙̥⸌）~~，我們可以快速地透過參數去修改配置。

如下面的 CSS 演示，在修改整體字型的時候，SASS 的部分可以透過修改變數來更改任何有套用到 font-stack 的 html tag style ，如果是用 CSS 的做法，要修改全部的 font 的字型，就要一個一個的找到 font 設定去修改~~（雖然 ctrl+F 也是挺方便啦）~~。

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

實作

那我們就來亂加變數玩玩看啦！

先從字型的變數來設定，先從 Google Font 挑選自己喜歡的字型，選擇之後右側會引導你如何引入在 js 或是 html 中，之後就是設定 SASS的部分。

首先 import Google Fonts url 進入專案中，之後在設定字型變數，並且在 h1 h2 的 style property 中加入字型變數，這樣 h1 h2 就會有不一樣的字型顯示！

// Google Fonts
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);

// Font Variables Setup
$roboto-slab: 'Roboto Slab', serif
$open-sans: 'Open Sans', sans-serif

$primaryColor: #e0a70a
$backgroundColor: #111111

h1
  color: $primaryColor
  font-family: $roboto-slab

h2
  font-family: $open-sans

之後打開 localhost ，使用chrome 的檢查來看看字型有沒有成功套用到

看來字型都有成功設置呢！真是可喜可賀

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？