Как на Angular 2 писать динамические стили?

Question

[Виталий]

Идея в том, чтобы стили зависели от переменных js, но при этом не перегружать html inline-стилями.

Например, нам нужен стандартный цвет, вокруг которого пляшет оформление других компонентов. В less мы можем вынести этот цвет в переменную, а затем использовать простую математику для цветового отклонения.

@main-color: #f00;
.smth {
  color: @main-color + #0f0;
}

Но вот возникает задача: позволить пользователю крутить колесо редактирования этого цвета в реал-тайм. Получается проблема, что цвета скомпилированы и встроены в css-классы. Можно ли наладить взаимодействие стилей и скриптов в Angular 2, при этом не отходя к написанию css в стиле React (описание стилей в коде)?

Answer 1

[Алексей Ярков]

less.js

Comments

[Виталий]

Спасибо. А как его к Angular 2 прикрутить?

[Алексей Ярков]

Виталий: хз )))

Answer 2

[Лучник *range attack +10*]

Как вариант вы можете переопределять JS'ом значение CSS переменной (см. CSS custom properties)