{"id":177,"date":"2011-06-26T19:07:07","date_gmt":"2011-06-26T17:07:07","guid":{"rendered":"https:\/\/sgaul.de\/?p=177"},"modified":"2014-03-13T21:34:55","modified_gmt":"2014-03-13T20:34:55","slug":"css-wie-es-sein-sollte-less-php","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2011\/06\/26\/css-wie-es-sein-sollte-less-php\/","title":{"rendered":"CSS wie es sein sollte: Less-PHP"},"content":{"rendered":"<p>Ein interessantes Tool, mit dem ich auch diese Seite zusammengeschraubt habe und das ich schon l\u00e4nger mal vorstellen wollte h\u00f6rt auf den irref\u00fchrenden Namen <a href=\"http:\/\/leafo.net\/lessphp\/\">Less-PHP<\/a>. Irref\u00fchrend insofern, weil es eigentlich nur PHP nutzt, an sich aber eine sch\u00f6ne M\u00f6glichkeit bereitstellt, <strong>CSS zu erzeugen<\/strong>. Der geht auf ein anderes Projekt zur\u00fcck, welches es schon l\u00e4nger gibt, nur <a href=\"http:\/\/lesscss.org\/\">Less<\/a> hei\u00dft, aber eben nicht PHP nutzt.<\/p>\n<p>Mit Less-PHP lassen sich innerhalb von CSS <strong>Variablen<\/strong> nutzen, Style-Eigenschaften <strong>verschachteln<\/strong> und <strong>vererben<\/strong>.<\/p>\n<table>\n<tbody>\n<tr>\n<th>Less-Code<\/th>\n<th>Erzeugter CSS-Code<\/th>\n<\/tr>\n<tr>\n<td>\n<pre>@color1: #000;\r\n@bordered {\r\n    border: 1px solid @color1;\r\n}\r\np {\r\n    font-family: serif;\r\n    a {\r\n        @bordered;\r\n        :visited {\r\n            color: #f00;\r\n        }\r\n}<\/pre>\n<\/td>\n<td>\n<pre>p {\r\n    font-family: serif;\r\n}\r\np a {\r\n    border: 1px solid #000;\r\n}\r\np a :visited {\r\n    color: #f00;\r\n}<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><!--more-->Dieses kurze Beispiel zeigt die wesentlichen Funktionen: In Zeile 1 wird eine Variable definiert, die anschlie\u00dfend \u00fcberall im Code verwendet werden kann. In der zweiten Zeile wird etwas wie eine anonyme Klasse definiert, die verschiedene Eigenschaften haben kann. Wird das in ein Element integriert (wie in Zeile 8), so gehen alle Eigenschaften in dieses Element \u00fcber. Man kann statt \u201e@\u201c auch einfach \u201e.\u201c oder \u201e#\u201c nutzen, wenn man die Eigenschaften auch f\u00fcr eine Klasse oder ID nutzen will. Man kann es dann trotzdem wie in Zeile 8 mittels <em>.bordered;<\/em> integrieren.<\/p>\n<p>In Zeile 7 sieht man sch\u00f6n das Prinzip der Verschachtelung. Man definiert, wie ein &lt;a&gt; im Kontext eines &lt;p&gt; auszusehen hat. Selbiges geht anschlie\u00dfend auch mit <em>:visited<\/em>.<\/p>\n<p>Viele weitere tolle Eigenschaften wie beispielsweise Rechenoperationen oder das Importieren anderer Less-Dateien sind auf den <a href=\"http:\/\/leafo.net\/lessphp\/docs\/\">Dokumentationsseiten<\/a> des Projektes beschrieben.<\/p>\n<h2>Einbindung<\/h2>\n<p>Die Einbindung ist recht einfach. Um es mit dem Beispiel der Dokuseite zu sagen:<\/p>\n<pre>require 'lessc.inc.php';\r\ntry {\r\n    lessc::ccompile('input.less', 'out.css');\r\n} catch (exception $ex) {\r\n    exit('lessc fatal error:'.$ex-&gt;getMessage());\r\n}<\/pre>\n<p>Bibliothek laden, Less-Datei und Ausgabedatei festlegen &#8211; fertig. Angeblich ist die Sache sogar recht effizient, da die Bibliothek merkt, ob sich seit der letzten Kompilierung in der Ausgangsdatei ver\u00e4ndert hat. Ich pers\u00f6nlich kommentiere es dennoch einfach aus, wenn ich nicht am Design arbeite. Oder man umgeht die Code-Ausf\u00fchrung ohnehin schon, indem man auf <a href=\"https:\/\/sgaul.de\/2011\/06\/26\/wordpress-durch-caching-und-kompression-beschleunigen\/\">Caching-Mechanismen<\/a> in der Seite setzt.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ein interessantes Tool, mit dem ich auch diese Seite zusammengeschraubt habe und das ich schon l\u00e4nger mal vorstellen wollte h\u00f6rt auf den irref\u00fchrenden Namen Less-PHP. Irref\u00fchrend insofern, weil es eigentlich nur PHP nutzt, an sich aber eine sch\u00f6ne M\u00f6glichkeit bereitstellt, CSS zu erzeugen. Der geht auf ein anderes Projekt zur\u00fcck, welches es schon l\u00e4nger gibt,&hellip; <a class=\"more-link\" href=\"https:\/\/sgaul.de\/2011\/06\/26\/css-wie-es-sein-sollte-less-php\/\"><span class=\"screen-reader-text\">CSS wie es sein sollte: Less-PHP<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[91],"tags":[38,51,52,41],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/177"}],"collection":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/comments?post=177"}],"version-history":[{"count":13,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/177\/revisions"}],"predecessor-version":[{"id":2540,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/177\/revisions\/2540"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media\/182"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}