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

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

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