CSS中變量規則的出現，大大方便了前端開發者的工作。變量規則能夠讓開發者將可變的值集中管理，減少代碼中重復的值，提高開發效率。

:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
nav {
background-color: var(--primary-color);
color: var(--secondary-color);
}

上面的代碼中，:root是偽類選擇器，表示文檔的根元素。在這個元素中定義的變量，可以在整個文檔中使用，就像全局變量一樣。在這里，我們定義了兩個顏色變量，分別對應應用的主要和次要顏色。

在nav選擇器中，我們直接使用了這些變量。當應用樣式時，CSS引擎會自動替換var()函數中的變量值。

變量規則不僅限于顏色，也可以用于其它具體的CSS屬性值，例如長度、字體、邊框、背景等。

:root {
--font: Arial, sans-serif;
--padding: 10px;
}
h1 {
font-family: var(--font);
padding: var(--padding);
}

上述代碼中定義了兩個變量，一個是字體，一個是內邊距。在h1選擇器中，我們使用了這些變量，應用了定義的字體和內邊距值。

總之，CSS變量規則增強了CSS的功能，使開發者能夠更加靈活地應用樣式。在開發過程中，我們可以嘗試使用變量規則來精簡代碼、提升開發效率。