Динамическое изменение меньшего количества переменных

Создатель less.js добавил некоторые функции, которые должны позволить вам сделать что-то подобное. Прочтите комментарии и ответы здесь: Динамическая загрузка правил less.js

Марвин, прошлой ночью я написал функцию, которая делает именно то, что ты ищешь.

Я создал форк на Github; https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc

Взгляните на это. Поскольку это недавнее дополнение, я хотел бы услышать ваши комментарии по поводу дополнения. Это решение идеально соответствует моим потребностям, и я думаю, что оно подойдет и вам.

Вот основной образец;

Образец МЕНЬШЕ:

@bgColor: black;
@textColor: yellow;
body {background: @bgColor; color: @textColor;}

Из JS:

less.modifyVars({
  '@bgColor': 'blue',
  '@textColor': 'red'
});

Это меньше:

@color1: #123456;
@color2: @color1 + #111111;

.title { color: @color1; }
.text { color: @color2; }

компилируется в этот CSS, и это все, что знает браузер:

.title { color: #123456; }
.text { color: #234567; }

Итак, теперь вы фактически говорите, что хотите динамически измениться на это:

.title { color: #ff0000; }

Вы можете сделать это, обратившись к существующей таблице стилей с помощью JS и изменив правило для .title. Или вы можете определить альтернативное правило в исходном CSS:

.alternate.title { color: #ff0000; }

И найдите все объекты с .title и добавьте к ним .alternate. В jQuery это будет так же просто, как:

$(".title").addClass(".alternate");

В простом JS вам нужно будет использовать прокладку для предоставления getElementsByClassName в кросс-браузерном режиме, а затем использовать:

var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
    list[i].className += " alternate";
}