Динамическое изменение переменной (во время выполнения) с помощью LESS и CSS?

Question

@myThemeBackground = #ddd;  

div#box1 { background: @myThemeBackground; }  

Я использую МЕНЬШЕ, чтобы использовать переменные для моего css. Это прекрасно работает, но мне интересно, есть ли способ динамически изменить myThemeBackground во время выполнения с помощью javascript или чего-то еще.

Так, скажем, если пользователь выбирает собственный цвет фона, я бы хотел, чтобы весь скин изменился.

Примечание: это для динамического создания тем / создания обложки приложения, когда пользователь выбирает цвет фона, например, а затем изменяется все приложение (без обновления страницы)

Answer 1

Вы можете изменять переменные Less на лету, используя метод modifyVars:

less.modifyVars({ myThemeBackground : '#000' });

Answer 2

Я обычно беру CSS, сгенерированный LESS, и включаю его в файл, чтобы оптимизировать скорость загрузки веб-страницы. Фактически, я использую LESS.app для Mac, чтобы сгенерировать мой CSS.

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

Я бы скромно предложил создать несколько таблиц стилей CSS с помощью LESS и включать эти файлы при необходимости с помощью JavaScript.

Answer 3

Единственное решение, которое я могу придумать, - это изменить текст, который вы отображаете, с помощью less.js:

less.refreshStyles()

Изменить текст в файле или в меньшем фрагменте стиля.

Подробнее об этом здесь: Динамически загружать правила less.js