CSS3 引入了新的變量定義方式——var()。它可以用來定義常量，也可以用來在樣式中引用這些變量。var() 可以有效地簡化 CSS 的代碼，增加了可維護性和靈活性。

var() 的基本語法如下：

var(變量名, [默認值])

其中，變量名是必填項，表示要引用的變量名稱；默認值是可選項，表示如果該變量未被定義，應該使用的默認值。

下面是一個簡單的示例：

:root {
--main-color: #fff;
}
body {
background-color: var(--main-color, #333);
}

在上面的代碼中，我們首先定義了一個變量--main-color，然后在body樣式中引用了這個變量。如果變量未被定義，background-color將會使用默認顏色#333。

需要注意的是，變量名稱必須以“--”開頭。

除了使用 var() 來引用變量之外，我們還可以使用var(--變量名)的方式在樣式中直接設定變量的值。例如：

a {
--link-color: #0077ff;
color: var(--link-color);
text-decoration: none;
}

上面的代碼中，我們為超鏈接設定了一個變量--link-color，然后在color樣式中引用了該變量。這樣做的好處是，如果我們需要改變超鏈接的顏色，只需要修改變量的值，不用每個地方都改一遍樣式。

除了普通的數值和顏色之外，var() 還可以引用其他屬性的值，例如：

:root {
--font-size: 16px;
}
h1 {
font-size: var(--font-size);
margin-bottom: calc(var(--font-size) / 2);
}

在上面的代碼中，我們設定了一個變量--font-size，然后在h1樣式中引用該變量作為字體大小，并在margin-bottom樣式中使用了calc()函數計算出了文字下方的空白間距。

總之，var() 讓 CSS 的變量定義和引用變得更加方便和靈活，有助于提高代碼的可維護性。