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

前言

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

變數是什麼?可以吃嗎?

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

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

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

Codepen

好處是什麼

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

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

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

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

Codepen

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

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

Codepen

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

然後個別載入 CSS 屬性中。

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

Codepen

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

還沒使用更換字型之前。

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

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

系統預設字型

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

系統 系統預設 英文字體 中文字體
Windwos - Microsoft JhengHei/ 微軟正黑體
Mac OS -apple-system San Francisco 蘋方體
iOS -apple-system San Francisco 蘋方體
Android - Roboto Droidsansfallback
0%