Estamos fazendo umaAplicação Angular2 e queremos poder criar, de alguma forma, uma variável CSS global (e atualizar os valores das propriedades sempre que alteradas quando a variável é atribuída).

Nós usamos o Polymer por um tempo (agora estamos mudando para os componentes Angular2) e usamos as propriedades CSS (o Polymer possui algum polyfill) e tínhamos acabado de atualizar os estilos usandoPolymer.updateStyles().

Existe alguma maneira de conseguirmos uma função semelhante?

EDITAR:

Queremos algo semelhante ao Sasscolor: $g-main-color ou para propriedades customizadas de CSScolor: var(--g-main-color) e sempre que decidirmos alterar o valor da propriedade, por exemplo algo comoupdateVariable('g-main-color', '#112a4f') atualiza dinamicamente o valor em qualquer lugar. Tudo isso enquanto um aplicativo está sendo executado.

EDIT 2:

Quero usar algumas variáveis globais de CSS em diferentes partes (host, elemento filho ...) do meu CSS e poder alterar o valor imediatamente - por isso, se eu alterar a variável my-color, ela será alterada em qualquer lugar do aplicativo.

Vou usar a sintaxe Sass, por exemplo:

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

É possível usar algo como tubos angulares?(Mas supostamente só funciona em HTML)

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