Less (css) -Code programmgesteuert mit JQuery-ähnlicher Selektorsyntax bearbeiten?

8

Es ist möglich, Bibliotheken in less.js zu verwenden, um CSS aus weniger Dateien im Browser dynamisch neu zu generieren. Wenn es eine einfache Möglichkeit gäbe, weniger Code zu modifizieren, wäre dies eine äußerst leistungsfähige Methode, um die CSS einer Site dynamisch zu aktualisieren.

Stellen Sie sich vor, Sie hätten eine Farbe, die 100 Mal in einer großen Site verwendet wurde. Wenn Sie diese Farbe dynamisch nur mit Javascript ändern möchten, müssten Sie jedes Bit CSS aktualisieren, das diese Farbe hat (vielleicht 50 Zeilen Code).

Mit dem, was ich mir vorstelle, müsste man nur so schreiben:

%Vor%

Ich denke daran, selbst etwas zu unternehmen, aber es klingt wie ein riesiges Projekt und ich frage mich, ob jemand schon so etwas angefangen hat?

edit: Um zu verdeutlichen, was ich am liebsten machen möchte, nehme ich einen String mit weniger Code, programmiere ihn programmatisch (vielleicht unter Verwendung einer jquery-ähnlichen Selektor-Syntax) und spucke ihn dann als modifiziertes Less aus. Im Idealfall ist der Code in Javascript (aber nicht unbedingt Client-Seite). Das Beispiel, das ich oben gebe, ist eine mögliche Anwendung, aber vielleicht keine gute (wo es vielleicht bessere Möglichkeiten gibt, es zu erreichen).

    
Michael Bylstra 23.04.2012, 02:49
quelle

6 Antworten

14

es ist definitiv möglich, aber ich musste den Quellcode etwas modifizieren (was ich denke, ist in Ordnung, wenn man bedenkt, dass es nicht wirklich gemacht werden soll :))

Ich nehme an, dass jeder zuerst eine Demo sehen möchte, klicken Sie hier: Ссылка (Das Skriptfenster enthält nur die modifizierte less.js-Quelle, alles, was von Interesse ist, befindet sich im html-Fenster)

kk, ich werde zuerst meinen Patch erklären, die Benutzung ist am Ende.

Patch besteht aus drei Teilen

fügt eine Dienstprogrammfunktion hinzu

%Vor%

Speichern Sie die Eigenschaft in einem Objekt und sagen Sie weniger, um ihre Stile zu aktualisieren.

Ändern Sie die Syntaxanalysefunktion

%Vor%

Alles, was wir hier tun, ist, die überschriebenen Eigenschaften zu serialisieren und sie am Ende jeder analysierten Datei hinzuzufügen.

Ändern Sie die loadStyles-Funktion

%Vor%

Standardmäßig ersetzt less den Typparameter von <style type='text/less'> auf type='text/css' und vergisst die less-source. Um dies zu verhindern, wird die ursprüngliche less-source gespeichert und geladen.

Verwendung und Schlussfolgerung

%Vor%

das funktioniert gut auf meinem Computer und ich muss zugeben, es sieht sehr ordentlich aus. Ich habe nicht externe weniger Dateien getestet, wenn sie nicht funktionieren, sollte es einfach zu beheben sein.

Ich denke immer noch, dass es nicht die beste Idee ist, dies in einer Produktionsumgebung zu verwenden (aus Gründen, die bereits von anderen erwähnt wurden).

    
kritzikratzi 19.09.2012 02:10
quelle
4

Obwohl ich mit @ Baz1inga übereinstimme, dass dies im Allgemeinen einfacher ist, wenn ich Klassen hinzufüge und entferne, weiß ich auch, dass es bestimmte Fälle gibt, in denen LESS-ähnliche Variablen viel besser funktionieren (zB wenn die Farbe manchmal Vordergrund, manchmal Hintergrund ist) oder an bestimmten Stellen aufgehellt ist). Das ist definitiv machbar; In der Tat, hier ist ein paar getestete Code, der es tun wird (abzüglich der jQuery-Stil-Syntax; ein besonderer Grund dafür, dass Sie brauchen?):

%Vor%

Die obige Funktion "update_css" wird von der Funktion "createCSS" in less.js abgeleitet; der Rest schrieb ich. Sie können nun jederzeit etwas tun, um die Farbe zu ändern und die Effekte sofort im Inhalt der Website erscheinen zu lassen:

%Vor%

(Beachten Sie, dass Ihr "maincode" wahrscheinlich aus .less-Dateien im Hintergrund geladen werden sollte - ich habe sie hier einfach den Variablen zur Vereinfachung zugewiesen.)

Nur zum Spaß (wie ich es nicht empfehle) - und um Ihnen zu zeigen, dass ich glaube, dass mein Code das tut, was Sie wollen - hier ist eine Funktion, mit der Sie den obigen Code für $("@mycolor").value("black"); : %Vor%     

jamalex 23.04.2012 04:48
quelle
1
  

vor allem Javascript kann nicht in eine Datei schreiben. Das Beste, was du kannst   Zu tun ist, dass Javascript das XML lesen und bearbeiten und dann diese Daten veröffentlichen   zu einem serverseitigen Skript, um in Datei zu schreiben.

im Allgemeinen Leute verwenden eine andere Klasse, um dieses Problem anzugehen und die vorhandene Klasse durch die neue Klasse zu ersetzen, anstatt die css-Datei selbst zu bearbeiten, die für mich ziemlich komisch klingt.

Ich stolperte über diesen Blogpost könnte das sein, wonach du suchst .. er zeigt verschiedene Möglichkeiten, News-Stylesheets basierend auf Ihren Anforderungen zu erhalten.

    
Baz1nga 23.04.2012 03:01
quelle
1

Wenn Sie c # tun können und diese Server-Seite tun wollen, unterstützt der Port dotless Plugins, bei denen Sie ein Besucher-Muster implementieren, um die weniger zu verändern, bevor es ausgespuckt wird ...

    
Luke Page 23.04.2012 06:12
quelle
1

es könnte, könnte nur eine gute idéer sein, aber wenn Ihre css / html richtig ist, sollte dies überhaupt nicht notwendig sein, Sie müssen nur auf die richtige Art und Weise Ihre Klassen stapeln, wenn Sie eine Menge "a " Stichworte. Wenn Sie sehr große Websites haben, können Ihre Kunden ziemlich wählerisch bei einigen kleinen Änderungen wie der Schriftart sein, dann ist es gut, Ihr Ergebnis anzupassen, und dann ist es sehr einfach, sich den Weg zu bahnen, als weitere Variablen zu erstellen / p>

Wenn Sie 1 Farbe ändern möchten, verwenden Sie einfach Ihr Suchwerkzeug und verwenden Sie Suchen und Ersetzen.

Bitte verwenden Sie nur einige CSS & amp; comon Wissen, um Ihr Ergebnis zu erhalten, je mehr Skripte Ihre Website manipulieren, desto mehr Ladezeit.

Mit freundlichen Grüßen

SP

    
Simon Pertersen 21.09.2012 08:02
quelle
1

Wenn Sie den kleineren Compiler lokal in Ihrem Browser verwenden, gibt es jetzt eine Funktion um weniger Variablen zu ändern :

%Vor%     
Peter 05.08.2015 15:31
quelle

Tags und Links