隨著前端技術的發展，現在的網頁設計越來越豐富多彩，CSS也隨之變得越來越復雜。Angular2為解決這個問題提供了一種新的方式來管理CSS變量。

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

在上述代碼中，我們定義了兩個CSS變量，可以在應用中重復使用。這些變量可以在樣式文件中聲明，也可以在組件的元數據中定義。元數據中定義的變量可以在該組件中使用，也可以傳遞給其子組件。

在元數據中聲明變量示例：

@Component({
template: '<div class="example"></div>',
styles: [
'.example { color: var(--primary-color); background-color: var(--secondary-color); }'
],
host: {
'[style.--primary-color]': 'getPrimaryColor()',
'[style.--secondary-color]': 'getSecondaryColor()'
}
})

在上述代碼中，我們使用了.host屬性來聲明我們的CSS變量。隨后，我們在函數getPrimaryColor()和getSecondaryColor()中返回這些變量的值。這樣，在我們的組件中使用這些變量時，它們會動態地根據返回值改變。

總結一下，CSS變量是Angular2框架中管理樣式的一個強大機制。使用CSS變量可以簡化樣式表，提高應用的可維護性，同時允許我們在需要的時候改變樣式。使用這種技術可以大大提高我們開發應用的效率，同時也可以提高我們應用的穩定性和易于維護性。