Parse MENO lato utente

Question

È possibile analizzare MENO lato client e restituire i risultati?

Attualmente sto usando come raccomandato nella documentazione, che include meno file e meno parser in seguito. Voglio essere in grado di restituire il css raw in modo da poterlo salvare come file css.

Non voglio installare node.js e simili, voglio una soluzione lato client.

Answer 1

Uno sguardo allo less.js source visualizza l'oggetto Parser. Supponendo che less.js è incluso nella pagina:

var data = "@colour: red; #example { background-color: @colour; }", 
    parser = new less.Parser({}); 

parser.parse(data, function (error, root) { 
    // code that handles the parsed data here... 
    // e.g.: 
    console.log(root.toCSS()); 
}); 

uscita volontà quanto segue alla console:

#example { 
    background-color: #ff0000; 
} 

Il costruttore per less.Parser ha effettivamente serie di impostazioni, e non capisco abbastanza del interni di MENO per dire ciò che potrebbe essere buono da passare (anche se sono tutti facoltativi, in modo che nessuno passa dovrebbe usare solo i valori predefiniti).

Il metodo Parser.parse accetta due parametri: una stringa contenente il file LESS e un callback che gestisce i dati analizzati. Il callback riceve fino a due parametri, un oggetto error (error) e un oggetto che rappresenta il parser LESS (root). root non viene passato se si verifica un errore irreversibile e error sarà null se non si è verificato alcun errore.

Purtroppo, non riesco a trovare una documentazione migliore sugli attributi del parametro di errore rispetto alla posizione in cui sono impostati nella sorgente here.

Answer 2

la risposta di @ dbaupp mi è stata di grande aiuto, ma non ho trovato che l'errore gestisse come descritto nella sua risposta.

Ho trovato gli errori da generare quando analizzo meno client anziché essere passati al parametro di errore, il che significa che non è possibile reagire a essi all'interno del callback dell'analisi.

// I too have no idea what to pass to less.Parser 
// but none of them seemed very useful for this 
// reading through the source 
var parser = new less.Parser({}), 
    toparse = '.foo {color: red;}'; 

try { 
    parser.parse(function (error, root) { 
     var css = root.toCSS(); 
     console.log(css); 
    }); 
} catch (e) { 
    // if we hit a 404 when importing a less file 
    // this is only thrown at the end of all the imports 
    // rather than as soon as it find one broken @import 
    if (e.name === 'TypeError' && e.message === "Cannot call method 'toCSS' of undefined") { 
     // handle typeerror here 

    // if there's a parse error 
    // assuming your original less file is just some @imports 
    // this will also tell you which file contains the error 
    } else if (e.line) { 
     // the url of the imported file 
     console.log(e.filename); 

     // the line containing the error 
     console.log(e.line); 

     // this is a 3 item array containing the line with the error 
     // +/- 1 line either side 
     // e.extract[1] will be your error 
     console.log(e.extract); 

     // this is the error message 
     console.log(e.message); 
    } else { 
     // it broke some other way 
     // I haven't had this happen to me yet 
     // so you'll have to figure it out for yourself ;) 
    } 
} 

Come esempio di dove questo potrebbe essere utile, la mia domanda sta aggiungendo il supporto per meno di mediawiki, dove non posso accedere a lato server nulla, ma posso accedere ai file CSS e JS del sito. Posso analizzare il meno me stesso e sostituire il css esistente con il significato meno appena analizzato io sono l'unico che ha bisogno di JS abilitato per farlo funzionare :)

Answer 3

Ecco un esempio di lavoro: https://jsfiddle.net/y0oss091/1/

less.render("p{color: #ff66ff}") 
    .then(function(output) { 
     console.log(output.css) 
    }, 
    function(error){}); 

Meno è caricato da un CDN.

Ci sono molte risorse là fuori.
Tuttavia, non sono sicuro che l'utilizzo lato client sia più semplice dell'installazione di npm e nodo.