Динамически изменяясь меньше переменных

Question

Я хочу изменить менее переменную на стороне клиента.Скажем, у меня меньше файла

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

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

Я хочу, чтобы пользователь выбрал цвет, изменил значение @ color1 и перекомпилировал css без перезагрузки страницы.

В основном я ищуфункция js, что-то вроде этого

less_again({color1: '#ff0000'}) 

Answer 1

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

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

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

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

Образец LESS:

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

От JS:

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

Answer 2

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

Answer 3

Это меньше:

@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";
}