(zuletzt bearbeitet )

Erst neulich hatte ich wieder ein unter Webdesignern sehr verbreitetes Problem: ein CSS-Element sollte die gleichen Anweisungen enthalten wie eine schon vorher definierte Klasse. Alles abtippen? Ne, zu doof. Glücklicherweise war ich schon vor einiger Zeit in meinem RSS-Feed auf lesscss.org gestoßen. Jetzt wurde die Seite wieder besucht, genau eine Javascript-Datei heruntergeladen und in das Projekt eingebunden - und schon ging's los.

Was los ging? Eigentlich nichts, im Gegenteil, es wurde gespart - nämlich viel unnötige Schreib- und Tipparbeit (oder auch kurze, aber lästige Copy-Paste-Aktionen 😉). Denn LESS verwandelt das normale Stylesheet in ein dynamisches - zum Beispiel durch die nun mögliche Benutzung von Variabeln. Dies ist aber noch einer der kleinsten Vorteile, die LESS bietet (auch wenn er mir enorm hilft!) - es können ebenso bereits definierte Klassen und IDs in eine neue "eingefügt" werden, Parameter können übergeben werden und vieles mehr. Eine ausführliche Dokumentation ist auf der Seite von LESS, lesscss.org, zu finden.

Das beste an der ganzen Geschichte: das Stylesheet bleibt valide! Ein wirklich sinnvolles und hilfreiches Tool, was bei mir auch in weiteren Projekten seinen Nutzen finden wird!

Über den Autor:

Grafikdesigner, Webentwickler und Schreiberling. Außerdem Art Direktor und Redakteur beim Spongo. Liebt angebissene Äpfel!

Andere Beiträge, die auf diesen Beitrag verlinken

6 Kommentare zu "Weniger CSS schreiben mit LESS" (RSS)

15. Juni 2011 22:33 UhrAntworten#
Mats
Danke für diesen überaus nützlichen Link 🙂
15. Juni 2011 22:47 UhrAntworten#
Hallo,

das System basiert auf JavaScript? Dann wäre es ja ein extremer Nachteil, wenn man das so aufbau. Sobald JavaScript beim Client deaktiviert ist, gibt es keinen CSS Code mehr?

Dann kann man dies besser serverseitig lösen. Einfach einen PHP Datei erstellen, den Contenttyp der Datei per PHP ändern und dann ganz normal einbinden. Schon spart man sich Schreibarbeit und es ist sicher, dass auch wirklich jeder Benutzer einen fertigen CSS Code bekommt.

Mfg. Arnee
16. Juni 2011 14:37 UhrAntworten#
Und wieso gibt man diesem anderem Element nicht einfach die gleiche Klasse, wie die bisherige, dessen Anweisungen es bekommen soll?
Wenn man einen guten CSS-Code schreibt, schreibt man auch nicht mehr als nötig.
Man kann ja pro Anweisungsgruppe mehrere Klassen/Elemente/IDs angeben. Ebenso kann ein Element auch mehrere Klassen gleichzeitig bekommen.

Ich finde den Einsatz von JavaScript hier nicht nur unnötig, sondern ebenso einfach unpraktisch, da ich CSS nicht von JavaScript abhängig machen möchte.
16. Juni 2011 18:07 UhrAntworten#
Das ganze lässt sich auf serverseitig lösen, per Node.js - also nicht zwingend abhängig von Javascript. Zwar kein PHP, aber dennoch ähnlich wie Arnee vorgeschlagen hat.

Vielleicht war mein Beispiel ein nicht ganz so tolles 🙂 Wenn man sich auf der Seite mal umsieht, fallen einem noch ganz andere Dinge ins Auge: zum Beispiel eben die Variablennutzung, die Verschachtelung des Codes, Farbvariationen, Funktionen etc. Hätte ich wahrscheinlich auch noch erwähnen sollen 😉
17. Juni 2011 19:52 UhrAntworten#
Asgar hat auch nochmal etwas ganz wichtiges gesagt: Warum dann zwei Klassen nehmen? Man kann das alles doch auch eine Klasse schreiben. Wenn ein Unterschied zwischen den beiden Elementen her muss, dann nimmt man halt eine Kombination aus Klasse und ID.

Node.js - ohne es jetzt wirklich zu kennen - sieht für mich stark nach JavaScript aus, aber Dateiendungen sagen ja nichts aus.

Also ich sehe keinen Anwendungsgrund, wenn man sich genug Gedanken macht, klappt es auch ohne Variablen, Funktionen, ect. Wenn man sie braucht, dann würde ich das auf jeden Fall Serverseitig lösen, damit es wirklich für alle gleich ist.
CSS, welches von JavaScript abhängig ist, ist ein absolutes NoGo.
17. Juni 2011 20:32 UhrAntworten#
Nachtrag:
So wie ich das, beim Überfliegen, gesehen habe, muss man die serverseitige Lösung erst über die Konsole installieren. Da liegt ein weiteres Problem. Wer kann einfach so auf seinem Webspace etwas installieren?

Jetzt bist du dran: Was denkst du?

Bitte beachte: Auch wenn das Angeben einer E-Mail-Adresse optional ist, so bist du doch nicht vollständig anonym, denn u.a. deine IP-Adresse wird mit dem Absenden dieses Formulars gespeichert.



Tastenkürzel


Überall

j: Älterer Artikel

k: Neuerer Artikel

s: Suchen

h: Hilfe


Auf Artikel-Seiten

t: Auf Twitter posten

f: Auf Facebook posten

g: Auf Google+ posten