網頁前端UI設計中，很多時候會需要經由計算調整數值，本文說明如何操作css變數及計算功能。

CSS變數

先看一段範例:

:root {
    --mainHeight: 100vh;
}

div.main {
    height: var(--mainHeight);
}

• :root: 就是在全域設定變數。
• 變數設定規則: CSS宣告變數規則是開頭為--。
• 使用變數: 使用變數需使用var()呼叫。
• 區分大小寫: 變數名稱是區分大小寫的喔。

CSS數值計算

先看一段範例:

:root {
    --mainHeight: calc(100vh - 100px);
}
div.main {
    height: var(--mainHeight);
}

這段程式表示--mainHeight變數值為視窗高度減掉10pixel。

calc()

使用calc()函式即可在CSS中計算數值。
須注意在做"+"、"–"運算時，運算符號前後需有空白，"×"、"÷"不用預留空白。

• Work example: calc(10px + 10px);
• Not work example: calc(10px+10px);