Propriedade CSS de mudança dinâmica Angular2
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 }} }