Я использую Angular-material-6. Я использую таблицу стилей angular-material и мою собственную таблицу стилей less в качестве основной таблицы стилей. У меня есть поле выбора в заголовке, в котором отображается название цвета темы, такое как красный, зеленый, синий и т. Д. Теперь моя задача - изменить меньшее количество переменных в соответствии с темой выбора пользователя.

Например, по умолчанию основной цвет моего приложения красный, и если пользователь изменит его на синий в поле выбора заголовка, он автоматически изменит цвет моей основной переменной на красный.

Я пробовал простое решение, такое как переключение CSS с index.html с помощью javascript, но я не уверен, как это сделать с все меньшим и меньшим количеством переменных.

Заранее спасибо.

1
Aditya Chitale 2 Апр 2019 в 16:02

2 ответа

Лучший ответ

Less - это препроцессор CSS, что означает, что он создает CSS во время компиляции, а не во время выполнения. Следовательно, вы не можете делать то, что собираетесь делать.

Вы можете взглянуть на переменные css, если хотите динамически переопределить их. Вы также можете использовать CSS в JS или разумно использовать каскадную модель CSS.

-1
soueuls 2 Апр 2019 в 13:13

Less может компилироваться во время выполнения и является одним из немногих процессоров CSS (если не единственным), который может делать это и программно изменять переменные CSS во время выполнения.

Ознакомьтесь с этим сообщением SO: Как использовать меньше в компоненте Angular без CLI

0
Justin F 10 Июл 2020 в 20:27