![\"\"](\"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/09\/less_logo.png\" "\\"Less"){kind=logo}
<\/p>\n<\/p>\n
Man, so einen bescheuerten Satz wollte ich schon immer mal schreiben. „Do more with Less“-ich komme mir vor wie ein ganz gro\u00dfes MarketingGenie. Dennoch, Less<\/a> ist ein feines Tool f\u00fcr Webdesigner, denn es hilft die Unzul\u00e4nglichkeiten von CSS ganz erheblich zu verringern.<\/p>\n Machen wir uns nichts vor, CSS ist zwar eine tolle Erfindung aber eine beschissene deklarative Sprache f\u00fcr Stilvorlagen. Selbst mit viel Sorgfalt und Dokumentation gelangt man irgendwann an den Punkt, wo man innerhalb seiner CSS Dokumente (die bei manchen Projekten eine beeindruckende L\u00e4nge erreichen k\u00f6nnen) einfach den \u00dcberblick verloren hat. Von der Wartbarkeit des Codes m\u00f6chte ich gar nicht erst anfangen, denn wer sich in die CSS Angaben eines Anderen einarbeiten muss (so wie ich bei dem WordPress Theme das ich nutze), der wei\u00df: diese Stunden h\u00e4tte man auch besser verbringen k\u00f6nnen.<\/p>\n Less ist eine Obermenge von CSS. Es f\u00fcgt der Syntax einige Features hinzu. So kann man beispielsweise Variablen deklarieren, parametrisierte Funktionen erstellen, einfache arithmetische Operationen ausf\u00fchren und – das sch\u00f6nste – die Dokumentstruktur im CSS Code wiedergeben. Man glaubt gar nicht was so eine kleine \u00c4nderung an \u00dcbersicht erzeugt.<\/p>\n Bevor ich aber selbst hier in die vielf\u00e4ltigen M\u00f6glichkeiten eintauche, m\u00f6chte ich das Less Tutorial von Tutsplus.com empfehlen, das noch weitaus umfangreicher und verst\u00e4ndlicher ist als die Webseite und Dokumentation von Less selbst. Zum Einstieg eignet sich Get into less – the programmable stylesheet language<\/a> ganz hervorragend und einige weitere Anregungen findet man unter Practical tips for using less<\/a>.<\/p>\n W\u00e4hrend der Entwicklung eines Webseitendesigns werde ich zuk\u00fcnftig also stark auf Less setzen. Ist das Design dann jedoch erstmal fertig, sollte man es vermeiden Less weiterhin einzusetzen. Schlie\u00dflich handelt es sich um ein weiteres Javascript was eingebunden und ausgef\u00fchrt werden muss und somit den Seitenaufbau verlangsamt. Dem kann man jedoch mit Winless<\/a> und anderen Tools begegnen. Winless konvertiert die fertige Designdeklaration automatisch in eine Standard-CSS Datei, die man dann prima auf seiner Webseite einbinden kann.<\/p>\n Nie wieder ohne Less!<\/p>","protected":false},"excerpt":{"rendered":" Man, so einen bescheuerten Satz wollte ich schon immer mal schreiben. „Do more with Less“-ich komme mir vor wie ein ganz gro\u00dfes MarketingGenie. Dennoch, Less ist ein feines Tool f\u00fcr Webdesigner, denn es hilft die...<\/p>\n","protected":false},"author":1,"featured_media":618,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[69,52,70],"class_list":["post-610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","tag-css","tag-css3","tag-webdesign"],"jetpack_featured_media_url":"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/09\/less_logo.png","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/comments?post=610"}],"version-history":[{"count":0,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/610\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media\/618"}],"wp:attachment":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media?parent=610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/categories?post=610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/tags?post=610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}@base: #f938ab;\r\n\r\n.box-shadow(@style, @c) when (iscolor(@c)) {\r\n box-shadow: @style @c;\r\n -webkit-box-shadow: @style @c;\r\n -moz-box-shadow: @style @c;\r\n}\r\n.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {\r\n .box-shadow(@style, rgba(0, 0, 0, @alpha));\r\n}\r\n.box { \r\n color: saturate(@base, 5%);\r\n border-color: lighten(@base, 30%);\r\n div { .box-shadow(0 0 5px, 30%) }\r\n}<\/pre>\nFazit:<\/h3>\n