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!
Ich fürchte, es funktioniert nicht. 'varsDef [k] .value.toCSS() ' gibt eine leere Zeichenfolge anstelle von "rot" zurück. – Philipp
@luke, konnte ich das 'Ruleset'-Objekt in der Client-Seite' less.js v2.1' erhalten, indem ich leere Objekte an den Parser-Konstruktor lege, zB '(new less.Parser ({}, {contents: { }}, {})). parse (lessMarkup, function (err, ruleset) {}) '. Problem ist, wenn '@ import' Anweisungen in' lessMarkup' stehen und der Parser fehlschlägt –