Estamos haciendo unAplicación Angular2 y queremos poder crear de alguna manera una variable CSS global (y actualizar los valores de las propiedades siempre que se modifiquen cuando se asigne la variable).

Habíamos usado Polymer por un tiempo (ahora estamos cambiando a componentes Angular2) y hemos usado propiedades CSS (Polymer tiene algunos polyfill) y acabamos de actualizar estilos usandoPolymer.updateStyles().

¿Hay alguna forma de lograr una función similar?

EDITAR:

Queremos algo similar a Sasscolor: $g-main-color o a propiedades personalizadas CSScolor: var(--g-main-color) y cada vez que decidamos cambiar el valor de la propiedad, p. algo comoupdateVariable('g-main-color', '#112a4f') actualiza dinámicamente el valor en todas partes. Todo eso mientras se ejecuta una aplicación.

EDITAR 2:

Quiero usar algunas variables CSS globales en diferentes partes (host, elemento hijo ...) de mi CSS y poder cambiar el valor de inmediato, por lo que si cambio la variable my-color, cambia en todas partes en la aplicación.

Usaré la sintaxis de Sass por ejemplo:

:host { border: 2px solid $my-color }
:host .some-label { color: $my-color }

¿Es posible usar algo como tubos angulares?(Pero supuestamente solo funciona en HTML)

:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }