CSS 中定義變量是一種很方便的特性，可以讓我們在樣式中使用變量，方便樣式的維護和修改。 定義變量需要使用 var() 函數，用法如下：

定義變量：

:root {
--primary-color: #345;
}

使用變量：

body {
color: var(--primary-color);
}

我們也可以在定義變量時進行運算：

定義變量時進行加法運算：

:root {
--padding: 20px;
--total-padding: calc(var(--padding) * 2);
}
.box {
padding: var(--total-padding);
}

定義變量時進行減法運算：

:root {
--width: 100%;
--margin: 20px;
--available-width: calc(var(--width) - (var(--margin) * 2));
}
.box {
width: var(--available-width);
margin: var(--margin);
}

注意事項：

• CSS 中允許的運算符有 +、-、*、/ 和 %。
• Calc() 函數中的表達式可以是復雜的，可以使用括號來管理運算順序。
• 定義變量時，變量的名稱可以使用任意有效的標識符（除了數字開頭），但是推薦使用小寫字母和破折號。

在實際開發中，我們可以使用變量和運算來方便地定義樣式，使得樣式代碼更加清晰，易于維護。但是需要注意不要濫用變量和運算，影響代碼的可讀性和性能。