随着前端技术的发展，现在的网页设计越来越丰富多彩，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变量可以简化样式表，提高应用的可维护性，同时允许我们在需要的时候改变样式。使用这种技术可以大大提高我们开发应用的效率，同时也可以提高我们应用的稳定性和易于维护性。