Geany: Dateiendungen für z.B. Less hinzufügen

Sebastian Gaul — Sat, 12 Nov 2011 13:52:50 +0000

Will man in Geany eine Datei bearbeiten, die nicht anhand der Dateiendung erkannt wird, so hat man weder Syntaxhighlighting noch andere sinnvolle Helfer. Das Problem tritt zum Beispiel auf, wenn man eine Datei mit der Endung .less öffnet: Diese wird mittels Less oder Less-PHP geöffnet und dann in normales CSS umgeformt. Dennoch ist der Less-Quelltext weitgehend CSS-Syntaxkompatibel. Um Geany zu überreden, Less-Dateien wie CSS zu behandeln, folgende Schritte notwendig:

Menüleiste: Werkzeuge > Konfigurationsdateien > filetype_extensions.conf
Hier suchen wir die Zeile mit CSS am Anfang; bei mir Zeile 38
Wir ändern die Zeile von
```
CSS=*.css;
```
in
```
CSS=*.css;*.less;
```
Änderung speichern

Bei mir übernimmt Geany die Änderung sofort, selbst der schon zuvor geöffnete Tab erstrahlt nun in den üblichen CSS-Farben.

Selbstverständlich ist dies auch mit allen anderen Dateitypen und -endungen möglich.

CSS wie es sein sollte: Less-PHP

Sebastian Gaul — Sun, 26 Jun 2011 17:07:07 +0000

Ein interessantes Tool, mit dem ich auch diese Seite zusammengeschraubt habe und das ich schon länger mal vorstellen wollte hört auf den irreführenden Namen Less-PHP. Irreführend insofern, weil es eigentlich nur PHP nutzt, an sich aber eine schöne Möglichkeit bereitstellt, CSS zu erzeugen. Der geht auf ein anderes Projekt zurück, welches es schon länger gibt, nur Less heißt, aber eben nicht PHP nutzt.

Mit Less-PHP lassen sich innerhalb von CSS Variablen nutzen, Style-Eigenschaften verschachteln und vererben.

Less-Code	Erzeugter CSS-Code
@color1: #000; @bordered { border: 1px solid @color1; } p { font-family: serif; a { @bordered; :visited { color: #f00; } }	p { font-family: serif; } p a { border: 1px solid #000; } p a :visited { color: #f00; }

Less-Code

Erzeugter CSS-Code

@color1: #000;
@bordered {
    border: 1px solid @color1;
}
p {
    font-family: serif;
    a {
        @bordered;
        :visited {
            color: #f00;
        }
}

p {
    font-family: serif;
}
p a {
    border: 1px solid #000;
}
p a :visited {
    color: #f00;
}

Dieses kurze Beispiel zeigt die wesentlichen Funktionen: In Zeile 1 wird eine Variable definiert, die anschließend überall 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 über. Man kann statt „@“ auch einfach „.“ oder „#“ nutzen, wenn man die Eigenschaften auch für eine Klasse oder ID nutzen will. Man kann es dann trotzdem wie in Zeile 8 mittels .bordered; integrieren.

In Zeile 7 sieht man schön das Prinzip der Verschachtelung. Man definiert, wie ein im Kontext eines

auszusehen hat. Selbiges geht anschließend auch mit :visited.

Viele weitere tolle Eigenschaften wie beispielsweise Rechenoperationen oder das Importieren anderer Less-Dateien sind auf den Dokumentationsseiten des Projektes beschrieben.

Einbindung

Die Einbindung ist recht einfach. Um es mit dem Beispiel der Dokuseite zu sagen:

require 'lessc.inc.php';
try {
    lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
    exit('lessc fatal error:'.$ex->getMessage());
}

Bibliothek laden, Less-Datei und Ausgabedatei festlegen – fertig. Angeblich ist die Sache sogar recht effizient, da die Bibliothek merkt, ob sich seit der letzten Kompilierung in der Ausgangsdatei verändert hat. Ich persönlich kommentiere es dennoch einfach aus, wenn ich nicht am Design arbeite. Oder man umgeht die Code-Ausführung ohnehin schon, indem man auf Caching-Mechanismen in der Seite setzt.

less – Sebastians Blog

Geany: Dateiendungen für z.B. Less hinzufügen

CSS wie es sein sollte: Less-PHP

Einbindung