在CSS的世界中，變量是一個不可或缺的概念，它可以在所有的樣式文件中定義一次，然后在整個網站中進行使用。但是，在網站的某些部分中，我們可能會有一些特殊的需求，需要將變量傳遞給另一個樣式文件，以達到更好的樣式效果。

/* 定義變量 */
:root {
--main-color: #333;
}
/* 使用變量 */
h1 {
color: var(--main-color);
}

如上代碼所示，我們在根元素中定義了一個名為“--main-color”的變量，然后在h1標簽中使用了該變量。這樣可以在整個CSS中使用變量，如下代碼所示。

/* 使用同一個變量 */
h2 {
color: var(--main-color);
}
p {
background-color: var(--main-color);
}

然而，如果我們想將該變量傳遞給另一個樣式文件呢？這就需要使用@import指令來實現。

/* 定義變量 */
:root {
--main-color: #333;
}
/* 導入樣式文件 */
@import url('example.css');
/* 在example.css中使用變量 */
h1 {
color: var(--main-color);
}

在example.css中同樣也要定義該變量，這樣才能使用。這樣我們就可以將變量傳遞給另一個樣式文件，實現更好的樣式效果。

總結來說，CSS的變量傳遞可以通過@import指令實現，在確保定義好變量后，使用var()函數來引用。這樣可以輕松實現整個網站的樣式效果的統一，減少代碼量，提高開發效率。