SCSS學習-變數($)(二)

發表於 2019-04-17 分類於 SCSS

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

從這篇開始就不會講到 SASS，讓我們來專心地了解一下如何基礎學會 SCSS。

前言

從這篇開始就不會講到 SASS，讓我們來專心地了解一下如何基礎學會 SCSS。

撰寫 SCSS 的時候，最方便的東西就是變數，首先 SCSS 設置變數的方式是使用了【$】字號，撰寫方式是這樣子
$變數名稱: 色碼、數字及字串等。
舉例來講→$black: #ec0f0f
#ec0f0f是紅色

讓我們照慣例速寫一個 box 出來瞭解。

圖片中可以看到我將一個色碼儲存至變數 ($red) 中，透過變數名稱直接呼叫於 background-color 並使用於此。

相信有些人一定會問，這樣子有什麼好處?
因為以往我們在寫 CSS 的時候都是上千上百行，有些時候顏色是不停重複使用的，當我們要變更顏色的時候就會顯得特別麻煩而且一方面也可以不需要用人腦來記憶色票。

所以就讓我們來實際實驗看看吧!
首先新增 5 個 box。

接下來針對 SCSS 也寫入 5 個相對應的 box。
並將background-color也加入$red的變數名稱。

此時我們可以看到 5 個紅色的 box。

以往我們若要修改這五個 .box 的顏色時，我們必須一個一個去做修改，但使用 SCSS 變數之後，僅需針對上方$red 的變數修改成所需要的色碼即可。

修改結果就可以看到，只要有使用 $red 變數的 class，就會通通變成你所指定的顏色囉!

我們也可以故意將所有 box 中的數值通通以變數載入來加快我們生產 box 的速度。
這邊另外新增一些變數，分別為$box-width、$box-height、$mb-1: 5px、$mb-2: 10px;

然後個別載入 CSS 屬性中。

結果如何呢?讓我們來看看。

相信各位應該已經感受到 SCSS 變數的威力，以往我們開發網站都會針對網頁字型做調整，所以我自己就會將字型加入至變數中使用。

還沒使用更換字型之前。

使用SCSS變數，來加載字型，這邊我使用的將系統預設字型載入。

圖片中可能看不出差異，所以可以自己嘗試看看唷!
Codepen

這邊也提供系統預設的字型表給各位，其中建議不要打【微軟正黑體】有可能會出現無法預期之錯誤。