在 Vue 中，你可以通過以下步驟來編寫 CSS 全局變量：

1、定義 CSS 全局變量：你需要在你的 CSS 文件中定義全局變量，這些變量通常用于存儲顏色、字體、尺寸等全局樣式信息，你可以創(chuàng)建一個名為$primary-color 的變量，并將其設置為你的主要顏色。

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

2、使用 CSS 全局變量：在你的其他 CSS 規(guī)則中，你可以使用這些全局變量來應用樣式，你可以使用--primary-color 來設置某個元素的背景顏色。

.element {
  background-color: var(--primary-color);
}

3、在 Vue 中應用 CSS 全局變量：在 Vue 中，你可以使用v-bind 指令來動態(tài)地應用這些全局變量到 HTML 元素上，你可以在一個按鈕上使用v-bind 來設置背景顏色。

<button v-bind:style="{backgroundColor: var(--primary-color)}">Primary Button</button>

4、注意事項：在使用 CSS 全局變量時，需要注意它們的命名規(guī)范和使用場景，變量名應該使用連字符（）來連接多個單詞，并且應該避免使用特殊字符或保留字，要確保你的變量在使用之前已經(jīng)被定義和初始化。

通過以上步驟，你可以在 Vue 中輕松地編寫和應用 CSS 全局變量，從而讓你的樣式更加模塊化和可維護。