Vue 是一個非常流行的前端框架，它提供了許多便利的功能和特性，其中之一就是在 CSS 中使用變量。參考下面的代碼示例，可以看到如何使用 Vue 中定義的變量。

/* 定義一個 Vue 實例 */
new Vue({
el: "#app",
data: {
primaryColor: "#2196F3",
secondaryColor: "#00BCD4"
}
});
/* 在 CSS 中使用 Vue 定義的變量 */
.btn-primary {
background-color: var(--primary-color);
color: #fff;
}
.btn-secondary {
background-color: var(--secondary-color);
color: #fff;
}

在上面的示例中，我們定義了一個 Vue 實例，并在 `data` 屬性中定義了兩個顏色變量 `primaryColor` 和 `secondaryColor`。接下來，我們在 CSS 中使用這些變量，方法是使用 `var()` 函數并傳入變量名。

使用 Vue 中的變量可以有許多好處，例如在多個組件和模塊之間共享顏色、字體和其他樣式屬性，這使得代碼更加模塊化和可重用。而且，一旦你需要修改某個樣式屬性，只需在 Vue 中修改變量的值，所有使用該變量的樣式將自動更新。

總之，Vue 的變量是一個非常有用的工具，它們可以顯著提高 CSS 樣式的可維護性和可重用性。我們應該善于利用這些變量并在項目中廣泛使用它們。