Gibt es eine Möglichkeit, WENIGER Dateien in CSS zu kompilieren (damit dies nicht jeder Browser tun muss)?

20

Ich denke darüber nach, WENIGER zu verwenden, aber ich schrecke bei dem Gedanken, dass ein Browser JavaScript deaktiviert und mein CSS nicht lesbar ist (und die Website schrecklich aussieht).

Außerdem beleidigt es den Ingenieur in mir, jeden Browser zu zwingen, diese Less-Datei in .css zu "kompilieren", wenn wir sie jedes Mal, wenn wir sie ändern, nur einmal "kompilieren" könnten.

Clay Nichols
quelle
1
@ Anonymous- Wenn du WENIGER auscheckst, solltest du dir auch SASS und COMPASS ansehen.
Sorcy
Stylus und OOCSS sind ähnliche Produkte.
Majestätsbeleidigung
1
Ich habe eine ähnliche Antwort zu erklären geschrieben , wie LESS Kompilation einzurichten automatisch auf dem Server: webmasters.stackexchange.com/questions/38386/...
romaninsh
3
Ich wusste nicht, dass jemand WENIGER in Browsern kompiliert!
Kenny Evitt

Antworten:

17

Ja. Sie können eine App verwenden, die beim Codieren WENIGER Dateien automatisch in CSS auf Ihrem Entwicklungscomputer kompiliert. Laden Sie dann einfach die generierte CSS-Datei auf Ihren Server hoch, wenn Sie mit der Entwicklung fertig sind.

Nick
quelle
11

Ich benutze SimpLESS - Drag, Drop, Fertig .

Sorcy
quelle
10

LESS enthält eine Binärdatei (lessc), mit der Sie Ihre .less-Dateien vorkompilieren können. Sie verwenden es als solches:

 $ lessc styles.less > styles.css

Aber ich denke, die meisten Leute verwenden einfach den Befehl lessc -woder, lessc --watchum das CSS-Stylesheet automatisch neu zu kompilieren, wenn die LESS-Datei aktualisiert wird. Sie können auch lessc das CSS minimieren lassen, z lessc -w -x.

Bearbeiten: Zur Verdeutlichung wird lessc mit der serverseitigen Installation geliefert (dh wenn Sie less über den Paketmanager node.js installieren). Sie können es jedoch manuell von GitHub herunterladen .

lessc befindet sich in /bin/lessc. Dies ist natürlich eine * nix-Binärdatei (sollte auch für Mac funktionieren), aber es gibt eine Windows-Binärdatei ( lessc.exe ), die auf dotless basiert, einem anderen Windows-WENIGER-Compiler.

Update: Wird less-watchzum automatischen Kompilieren verwendet.

Alternativ verwenden heutzutage viele Entwickler Task-Läufer grunt, um die Build-Automatisierung (Kompilieren, Minimieren, Testen usw.) durchzuführen. Mit grunt-contrib-watch, grunt-contrib-lessund grunt-contrib-livereloadkönnen Sie wirklich Ihre Entwicklung Workflow optimieren.

Wenn Sie beispielsweise yoIhr neues Webprojekt als Scaffold verwenden, ist es vorkonfiguriert, Ihre LESS / CSS / JS / HTML-Dateien auf Änderungen zu überprüfen und die erforderlichen Teile Ihres Projekts bei Bedarf neu zu kompilieren. Einfach ausführen grunt serveund schon können Sie programmieren, ohne sich um das manuelle Kompilieren (LESS / SASS / CoffeeScript), das Minimieren / Verketten Ihres Codes oder das manuelle Aktualisieren Ihres Browsers wie ein Höhlenmensch kümmern zu müssen ...

Majestätsbeleidigung
quelle
1
Ich bin nicht sicher, welche Version Sie verwenden. In der neuesten Version 1.3.0 gibt es keine --watch-Funktion. Eine Pull-Anfrage für eine --watch-Funktion wurde vor 9 Monaten abgeschossen. github.com/cloudhead/less.js/pull/246
Gerard Roche
@BullfrogBlues: Entschuldigung, das war aus der alten Ruby-basierten Lektion.
Majestätsbeleidigung
Hinweis: "less-watch wurde in fs-change umbenannt. Verwenden Sie stattdessen:. npm install -g fs-change"
Andrew Lott
6

Es gibt eine Reihe von Optionen zum Kompilieren von WENIGER als CSS auf dem Server, und die von Ihnen gewählte hängt wahrscheinlich davon ab, was Sie für den Rest der Site verwenden.

  • Wenn Sie node.js verwenden, erledigt die ursprüngliche Lektion den Job.
  • Wenn Sie PHP verwenden, verwenden Sie lessphp . Es hat eine etwas miese API, wenn es darum geht, Variablen von PHP zu übergeben, aber es macht den Job.
  • Wenn Sie Ruby verwenden, ist SASS nicht WENIGER, aber so ähnlich, dass ich beim Wechsel von SASS (persönliches Projekt) zu LESS (ein PHP-Projekt bei der Arbeit) keine Unterschiede außer der Dateierweiterung bemerkte. Es hat auch eine nützliche Bibliothek von Mixins - COMPASS . Ich habe nicht versucht, sie mit LESS zu verwenden, aber ich gehe davon aus, dass sie funktionieren werden. (Anscheinend war LESS ursprünglich Ruby, also gibt es wahrscheinlich auch irgendwo einen alten Compiler).
  • Wenn Sie ASP.Net verwenden, gibt es .less . Ich habe dieses nicht benutzt, also weiß ich nicht, wie gut es funktioniert.
  • Wenn Sie Java verwenden, wird lesscss4j mit der in LESS und Java 6 integrierten Rhino- Skriptumgebung kompiliert.
  • Wenn Sie Perl verwenden, enthält CPAN ein LESSp- Modul.
Peter Taylor
quelle
2
Es gibt einen Ruby-Compiler, der mit dem alten Ruby-Juwel WENIGER geliefert wird, der jedoch nicht mehr aktualisiert wird, sodass viele der neuen Funktionen nicht mehr funktionieren. Wenn Sie also Ruby verwenden, würde ich nur die Verwendung des lesscBinär-Compilers empfehlen, der auf der neuesten Version von less.js basiert.
Majestätsbeleidigung
@ Lèsemajesté, ich würde einfach mit SASS gehen, aber ich wollte nicht beschuldigt werden, die Möglichkeit, LESS in Ruby zu kompilieren, absichtlich ignoriert zu haben.
Peter Taylor
1
Ja, ich denke, SASS wäre die beste Option für Ruby, da der Edelstein LESS seit dem Wechsel zu JS veraltet ist.
Majestätsbeleidigung