In den Seitenlayouts deines Themes werden u. a. die fertigen CSS-Stylesheets eingebunden. Zur Erstellung von CSS-Dateien werden oftmals CSS-Präprozessoren wie Sass bzw. SCSS oder Less eingesetzt. Für die folgenden Beispiele nutzen wir Sass/SCSS. Die Vorgehensweise für Less ist ansonsten, abgesehen von der unterschiedlichen Sprach-Syntax, identisch.
Die Nutzung der Präprozessoren setzt normalerweise eine lokale Installation voraus. Mit Contao kannst du .scss
oder .less Dateien direkt im Seitenlayout einbinden. Die entsprechenden CSS-Dateien werden dann automatisch erstellt.
Auch wenn die direkte Nutzung in Contao funktioniert wird dennoch die Einbindung fertiger CSS-Dateien bzw. deren lokale Erstellung über CSS-Präprozessoren empfohlen.
Für unser einfaches Beispiel erstellen wir uns unterhalb des files-Ordner zwei Dateien: theme.scss und _elements.scss
in einem beliebigen Verzeichnis das öffentlich zugänglich ist. In der theme.scss wird lediglich eine Variable
mit einem Farbwert und die Datei _elements.scss (Sass-Partial) über die
@import Anweisung inkludiert. In der Datei _elements.scss
setzen wir für das H1-Element den Farbwert über die Variable $main-color und einen separaten Farbwert für einen Absatz.
// theme.scss
$mainCol: rgb(255, 0, 0) !default;
@import '_elements';
// _elements.scss
h1 { color: $mainCol; }
p { color: rgb(0, 255, 0); }
Selbstverständlich bieten die CSS-Präprozessoren viel mehr Möglichkeiten. Für unser Beispiel reicht es aber aus.
Du kannst nun die Datei theme.scss in deinem Seitenlayout einbinden, analog zur üblichen Vorgehensweise mit
.css-Dateien. Die Datei _elements.scss muß hierbei nicht zusätzlich ausgewählt werden. Deine Webseite sollte im Anschluß
rote H1-Überschriften und blaue Textabsätze anzeigen.
Du kannst nun über die Contao Dateiverwaltung die Datei theme.scss direkt bearbeiten.
Setze für die Variable $main-color einen anderen Farbwert und speichere die Änderung ab. Die H1-Überschrift wird mit
dem geänderten Farbwert ausgegeben.
Trage nun über die Contao Dateiverwaltung in der Datei _elements.scss einen anderen Farbwert
für den Absatz ein und speichere die Änderung ab. Diese Änderung wird leider im Frontend nicht sofort übernommen!
Damit deine Änderung in der Sass-Partial Datei wirksam wird musst du im Anschluss entweder die theme.scss bearbeiten (Einfach
eine Leerzeile einfügen und speichern) oder in der »Systemwartung« den Scriptcache leeren.
Die Contao Integration der CSS-Präprozessoren erfolgt über eigenständige, freie PHP-Bibliotheken. Im Falle von Sass nutzt Contao scssphp/scssphp. Welche Version hierbei aktuell herangezogen wird kann man der jeweiligen Contao composer.json entnehmen.
Hierbei handelt es sich also hinsichtlich des Sass-Funktionsumfangs um eine eigenständige Umsetzung die nicht unbedingt
immer der tatsächlichen Sass-Version entspricht. Falls du also in deinen .scss-Dateien
Funktionalitäten entsprechend der aktuellen Sass-Dokumentation benutzen willst, werden
diese evtl. über die Contao Integration gar nicht unterstützt. In diesem Fall hilft nur der Vergleich mit den jeweiligen
Angaben des scssphp/scssphp Entwicklers.
Wenn du obige Hinweise berücksichtigst kannst du ohne weiteres mit .scss oder .less in Contao arbeiten. Dies gilt
besonders wenn du hauptsächlich Variablen oder Partials verwendest. Der Vorteil liegt hierbei in der Möglichkeit der
direkten Bearbeitung über den Contao Dateimanager.
Andererseits stehen dir möglicherweise nicht alle aktuellen Funktionen der CSS-Präprozessor-Versionen zur Verfügung. Eine Fehlersuche ist dann aufwendig.
Wie bereits eingangs erwähnt, wäre daher der lokale Umgang mit CSS-Präprozessoren empfehlenswert. Du bist dabei
unabhängig hinsichtlich des Einsatzes der jeweiligen Präprozessor-Versionen. In Contao bindest du lediglich deine
finalen .css-Dateien ein.