Alterando dinamicamente menos variables

Eu quero mudar uma variável menos no lado do cliente. Digamos que eu tenha menos arquivos

@color1: #123456; @color2: @color1 + #111111; .title { color: @color1; } .text { color: @color2; } 

Eu quero que o usuário escolha uma cor e altere o valor de @ color1 e recompile o css sem recarregar a página.

Basicamente eu estou procurando uma function js, ​​algo assim

 less_again({color1: '#ff0000'}) 

O criador de less.js adicionou alguns resources que devem permitir que você faça algo assim. Leia os comentários e as respostas aqui: Carregue as regras do less.js dinamicamente

Marvin, escrevi uma function que faz exatamente o que você está procurando, ontem à noite.

Eu criei um fork no Github; https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc

Dê uma olhada nisto. Como esta é uma adição recente, gostaria de ouvir seus comentários sobre a adição. Esta solução atende perfeitamente às minhas necessidades e acho que fará o mesmo por você.

Aqui está uma amostra básica;

Amostra MENOS:

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

De JS:

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

Isso menos:

 @color1: #123456; @color2: @color1 + #111111; .title { color: @color1; } .text { color: @color2; } 

compila para este CSS e isso é tudo que o navegador conhece:

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

Então, agora você está efetivamente dizendo que quer mudar dinamicamente para isso:

 .title { color: #ff0000; } 

Você pode fazer isso .title a folha de estilo existente com JS e alterando a regra para .title . Ou você pode definir uma regra alternativa em seu CSS original:

 .alternate.title { color: #ff0000; } 

E encontre todos os objects com título e adicione-lhes a opção. No jQuery, isso seria tão simples quanto:

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

No JS simples, você precisaria usar um shim para fornecer getElementsByClassName em um cross-browser e depois usar:

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