iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

如何成為一名斜槓煉金術士,學習前端相關技能系列 第 13

Day13 Sass篇-什麼是變數?

大家好,我是烏木白,今天要介紹的是 Sass 裡的變數!

變數是什麼?

變數按照字面上來看,就是一個可以變動的數,那為什麼今天在寫 Sass 的時候需要了解變數呢?
以下範例:

.header {
    color: red;
}

.content {
    color: red;
}

.footer {
    color: red;
}

這個在我們一般專案不大時,如果再使用顏色時都會這麼設置,但是今天這個專案完成後,或者是之後要做主色系的調整,你就必須要每個選擇器都要做更改,我們使用變數的話,那我們只需要更改最主要的地方即可。

變數示範:

$primary: black;

.header {
    color: $primary;
}

.content {
    color: $primary;
}

.footer {
    color: $primary;
}

這時候在畫面上或者是編譯出來的內容就會是黑色喔!!

常見變數編譯錯誤

  1. 因為 Scss 是一個嚴謹的程序語言,所以在使用時,記得要加上 ;$ ,不然可能會編譯錯誤喔!
  2. 因為程式碼是從上到下的去做閱讀,建議大家在使用時,記得把自己設定的變數放在最上面,避免讀不到的情況!

各位在學習時,一定要試著犯錯,才知道問題在哪喔!


上一篇
Day12 什麼是Sass?
下一篇
Day14 Sass 變數有趣的地方
系列文
如何成為一名斜槓煉金術士,學習前端相關技能30

尚未有邦友留言

立即登入留言