Dinamicamente cambiando meno variabili

Question

voglio cambiare una variabile meno sul lato client. Dire che ho un file meno

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

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

Io voglio che l'utente yo scegliere un colore e modificare il valore di @ color1 ricompilazione e css senza ricaricare la pagina.

In sostanza sto cercando una funzione js, qualcosa di simile

less_again({color1: '#ff0000'}) 

Answer 1

Il creatore di less.js aggiunto alcune caratteristiche che dovrebbero permettere di fare qualcosa di simile. Leggi i commenti e le risposte qui: regole less.js dinamicamente

Answer 2

Marvin, Ho scritto una funzione che fa esattamente quello che stai cercando, la scorsa notte.

Ho creato una forchetta su Github; https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc

Date un'occhiata a questo. Poiché si tratta di una recente aggiunta, mi piacerebbe sentire i vostri commenti in materia di aggiunta. Questa soluzione si adatta perfettamente alle mie esigenze e penso che farà lo stesso per voi.

Ecco un esempio di base;

Esempio MENO:

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

Da JS:

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

Answer 3

Questa meno:

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

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

compila a questo CSS e tutto questo è il browser conosce:

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

Quindi, ora si sta effettivamente dicendo che si desidera modificare in modo dinamico a questo:

.title { color: #ff0000; }

Si può farlo raggiungendo nel foglio di stile esistente con JS e cambiare la regola per .title. In alternativa, è possibile definire una regola alternativo nel CSS originale:

.alternate.title { color: #ff0000; }

E, trovare tutti gli oggetti con .title e aggiungere .alternate a loro. In jQuery, questo sarebbe il più semplice:

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

In JS pianura, avresti bisogno di usare uno spessore di fornire getElementsByClassName in modo cross browser e quindi utilizzare:

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