Stylesheets in LESS

Ab Version 2.3 (#2602) von Stud.IP werden Stylesheets in LESSCss (http://lesscss.org) geschrieben und in normales CSS kompiliert.

Das Kompilieren der .less-Dateien ist nun Teil des Buildprozesses bzw. kann auch separat mittels make less auf der Kommandozeile angestossen werden.

Während der Entwicklung können natürlich auch externe Tools zum Kompilieren verwendet werden, eines davon wäre SimpLESS.

Es sind außerdem die Mixins von Twitters Bootstrap-Toolkit eingebunden, welche viele übliche Anwendungsfälle abdecken.

Spezielle Variablen und Mixins für Stud.IP

Pfade

@image-path: Pfad zu den Bildern von Stud.IP, entspricht im Standardfall public/assets/images

Bilder

Für Retina-Bilder stehen die beiden folgenden Funktionen zur Verfügung:

.retina-background-image(@normal, @retina): Bindet ein Hintergrundbild für Retina-Displays in zwei Größen ein. Die Bilder werden hierbei im Image-Pfad von Stud.IP erwartet.

Icons

Ab v3.4 können Stud.IP-Icons in LESS/CSS über folgenden Mixins eingebunden werden:

Zweck	Signatur	Beispiel
Icon im Hintergrund	`.background-icon(shape, role);`	`.background-icon('seminar', 'clickable');`
Button mit Icon inkl. Hover-Effekt	`.button-with-icon(shape, role, role_hover)`	`.button-with-icon("accept", "clickable", "info_alt")`
Icon als BG in ::before	`.icon("before", shape, role)`	`.icon("before", "arr_1right", "clickable")`
Icon als BG in ::after	`.icon("after", shape, role)`	`.icon("after", "arr_1right", "clickable")`

Farben

// TODO: Tatsächliches Farbschema als Screenshot anzeigen // TODO: Namensräume besser beschreiben

Seit Version 3.0 gibt es für Stud.IP ein eigenes Farbschema, auf welches - soweit möglich - immer zurückgegriffen werden sollte.

@base-color: Grundfarbe
@content-color: Farbe für Inhalte
@light-gray-color: Helles Grau
@dark-gray-color: Dunkles Grau
@activity-color: Kennzeichnet Aktivitätsmöglichkeiten
@orange: Ein Orange-Ton
@red: Ein Rot-Ton

Alle Farben gibt es jeweils in vier weiteren Abstufungen, bei denen jeweils 80%, 60%, 40% bzw. 20% der Originalfarbe gemischt wurden. Diese Farben spricht man indem, man der Farbvariable den jeweiligen Prozentsatz mit einem - getrennt anhängt, bspw. red-60.

LESS in Plugins

Die Klasse StudipPlugin stellt die Methode addStylesheet() zur Verfügung, über welche LESS auch in Plugins verwendet werden kann. Dazu muss dieser Funktion der Name der LESS-Datei relativ zum Pluginpfad angegeben werden. Dadurch wird die LESS-Datei kompiliert und gleichfalls in der Seite zur Verfügung gestellt. Alle Mixins, die im Kern zur Verfügung stehen, stehen auch dem Plugin zur Verfügung.

Darüber hinaus steht seit Stud.IP 3.4 den Plugins im LESS die Variable @plugin-path zur Verfügung, um auf Dateien innerhalb des Pluginverzeichnisses zu referenzieren.

Eigene Implementierungen zum Speichern der kompilierten Dateien

Falls die Speicherung der kompilierten Dateien geändert werden soll, kann der Assets\Storage über die Methode setFactory() eine Instanz einer eigenen Implementierung von Assets\AssetFactory übergeben, welche spezialisierte Assets\Asset-Objekte erzeugt, die die Speicherung anders verwalten können. Auch der Downloadpfad für den Zugriff auf die Dateien kann dabei entsprechend abgeändert werden. Für nähere Informationen wird auf die Interfaces AssetFactory und Asset bzw. deren konkreten Kern-Implementierungen PluginAssetFactory und PluginAsset verwiesen.

Eine solche Änderung kann über ein SystemPlugin eingespielt werden, sofern dieses als erstes Plugin geladen wird (kleinste "Position" in der Pluginverwaltung des Systems).

aus "Stud.IP-Entwicklerdokumentation"

Entwickler: LESSStyles