在CSS 3中，我們可以使用自定義屬性（CSS變量）來定義一些常用的CSS樣式，然后在樣式中使用這些變量。這樣可以大大簡化CSS代碼，使代碼更加易于維護。而在CSS中，我們還可以對這些變量進行基本的數學運算。

:root {
--main-color: #000000;
--light-color: #ffffff;
--dark-color: #333333;
--width: 100px;
--height: 50px;
}
div {
background-color: var(--main-color);
color: var(--light-color);
width: calc(var(--width) + 10px);
height: calc(var(--height) * 2);
border: calc(var(--width) / 10) solid var(--dark-color);
}

在上面的代碼片段中，我們定義了四個變量，分別表示主色、亮色、暗色、寬度和高度。在樣式中，我們使用了var()函數來使用這些變量。同時，我們還對寬度和高度進行了基本的數學運算。在calc()函數中，我們可以使用加、減、乘、除等基本運算符，從而動態計算出樣式屬性的值。

除了基本的數學運算，我們還可以在CSS變量中使用簡單的邏輯運算。例如，我們可以使用var(--main-color, #cccccc)來定義一個主色變量，如果我們沒有定義這個變量，那么它將被默認設置為#cccccc。這樣可以避免在代碼中使用太多的if判斷。

總之，CSS變量運算為我們帶來了更加靈活和強大的CSS編程方式，可以大大簡化CSS代碼，提高代碼的可讀性和可維護性。