less.js - Variable Werte innerhalb des Callbacks der Parser erhalten

Question

Ich benutze less.js (1.3.0), um auf der Client-Seite weniger zu css zu analysieren. Im Callback der Parser möchte ich den Wert für jede Variable erhalten. Ich habe folgendes ohne Erfolg versucht.

Weder eval() noch die toCSS() gab mir irgendwelche Ergebnisse. Ich verstehe die inneren Abläufe der Parser nicht. Jedes Variablenobjekt hat eine Variableneigenschaft varsDef [k] .value, die selbst ein Objekt ist. Aber ich brauche nur den String-Wert der Variablen.

Weiß jemand wie man die Werte der Variablen als String bekommt?

Answer 1

varsDef[k].value.toCSS() 

sollte der Wert

varsDef[k].name 

varsDef[k].toCSS() 

nichts zurückgibt den Variablennamen sein sollte, weil es sich um eine Variable ist - in CSS Variablen nicht ausgegeben.

Answer 2

ich lief in dieses Problem vor kurzem, und es hat mich gebissen, weil, wie Sie, ich Sie oben, aber entlang der Linien von

@redColor: #900; // responds to .toCSS() 
@fooColor: desaturate(@redColor, 20%); // both of these error out 
@barColor: lighten(@fooColor, 10%); // when calling .toCSS() 

für komplexe Variablen schrieb so etwas wie sehr wie der Code des Laufens den gleichen Instinkt hatte

Sie würden diese verschachtelte tree.Value für @barColor erhalten, die diese verschachtelte Darstellung des Parse-Baums war, so würde es sagen, nicht hilfreich, dass barcolor: {[value: {value: [{lighten: {...}}]}]} oder soetwas. Mein Parsing-Fu ist ziemlich schlecht, weil ich irgendwann mit irgendeinem Objekt enden würde, das mir nicht mehr antworten würde, indem ich tree.toCSS anrufe, also habe ich diesen Weg aufgegeben.

Statt dessen, was ich war ein Unsinn .Weniger Datei mit einer Importregel und Unsinn Regel erzeugt hat, wie so

@import "varfile.less"; 

.foo { 
    redColor: @redColor; 
    fooColor: @fooColor; 
    barColor: @barColor; 
} 

weniger wird eine solche Datei glücklich analysieren, ist es nicht egal, ob redColor ist eine echte CSS-Eigenschaft oder nicht, es ignoriert es einfach und tut alle Substitutionen, wo es pflichtgemäß ist. Und so enden Sie tatsächlich mit einer einzigen Regel CSS-Datei, die Sie leicht analysieren können, da es sehr einfach markiert ist. es sieht wie folgt aus:

.foo{ 
    redColor: #990000; 
    fooColor: #8a0f0f; 
    barColor: #b81414; 
} 

das ist, zufällig, die einfachste Datei zu analysieren. es ist praktisch, in json verwandelt zu werden oder was hast du. Zugegeben, der Weg dorthin ist ziemlich komisch. Ich vermute, dass es daran liegt, dass eine Variable ohne eine Regel immer noch ein faires Spiel ist, das innerhalb der Regel selbst geändert werden kann, aber ich könnte das nur rationalisieren.

vorausgesetzt, Sie möchten nur die endgültigen Werte Ihrer weniger vars und nicht die semantischen Werte Ihrer weniger vars, es ist ziemlich praktisch. Wenn Sie Semantik wollen, ist es besser, nur die tatsächliche Datei zu analysieren.

Ich schrieb dies im Knoten und nachdem ich meine eigenen Einwände überwunden hatte, wie dämlich es sich anfühlte, funktionierte es ziemlich gut und gab mir ein json dict mit den Variablen meines Projekts. Sie können einen Blick darauf werfen, es ist auf Github um nsfmc/less-extractor, die im Grunde genommen eine grundlegende Konfigurationsdatei und schreibt dann auf ein json dict. es ist unelegant, aber es funktioniert völlig, auch wenn es ein bisschen hackisch ist.

Ihre ursprüngliche Frage danach, dies vollständig clientseitig zu tun, so dass das Github-Projekt auszuschließen scheint, aber die Idee ist sehr ähnlich: Sie möchten in der Lage sein, auf die ursprüngliche weniger Datei als Teil von einigen Xhr zuzugreifen Anfrage, analysiere es, um die Variablennamen zu erhalten, baue eine weniger Zeichenkette, analysiere das, und dann ist der Rest des Codes nur String-Erstellung und Lauf der Mühle-Analyse.

hoffe das hilft dir!

Answer 3

Ich hatte auch Probleme mit dem weniger Parser auch; Es war lächerlich, die rekursive Überprüfung von Baumknoten zu machen.

Wenn Sie die tatsächlichen Werte im Gegensatz zu den generierten CSS (wie in der obigen Antwort) möchten, ist der beste Weg wahrscheinlich, den Text der Datei manuell zu analysieren.

Diese Funktion gibt ein Schlüssel/Wert-Paar für jede der Variablen in einer gegebenen weniger Datei zurück. Es funktioniert nicht, wenn die LESS-Datei mehrere Werte pro Zeile hat, Sie könnten es besser mit Regex machen. Ich habe es verwendet, um Bootstrap-Variablen-Datei zu analysieren, die gut funktioniert.

getLessVars = (lessStr) -> 
    lines = lessStr.split('\n') 
    lessVars = {} 
    for line in lines 
    if line.indexOf('@') is 0 
     keyVar = line.split(';')[0].split(':') 
     lessVars[keyVar[0]] = keyVar[1].trim() 
    return lessVars