Die Contao Demo repräsentiert eine vollständige Website zwecks Darstellung der Contao Möglichkeiten. Du kannst auf contao.org die Demo inkl. Backend-Zugang einsehen und testen oder du installierst dir die Contao Demo und erweiterst diese nach deinen Bedürfnissen.
Bei den folgenden Angaben handelt es sich nicht um ein vollständiges Tutorial bez. einer lokalen Contao Installation, CSS oder SASS/SCSS Nutzung. Es werden hierbei lediglich einige der Optionen aufgeführt, die du zur Anpassung nutzen könntest. Diese sollten als Anregungen dienen und sind unabhängig von den zahlreichen, weiteren Möglichkeiten in Contao.
Die Contao Demo kannst du über den Contao-Manager, bei einer Neuinstallation, bequem installieren. Weiterhin besteht die Möglichkeit der Installation über die Konsole. Informationen hierzu findest du auf der entsprechenden GitHub-Seite. Im Anschluss kannst du im Contao Backend die vollständige Umsetzung der Contao Demo Website nachvollziehen.
Die Contao Demo benutzt .scss Dateien für die Gestaltung. Die app.scss wird direkt in den jeweiligen
Theme-Einstellungen genutzt und dann über Contao als finale .css Datei kompiliert und bereit gestellt.
Was du hierbei berücksichtigen solltest, wird im Beitrag »Sass/Less Integration« näher beschrieben.
Mit dem Wissen obiger Contao Möglichkeiten (via »scssphp/scssphp«) kannst du direkt im Contao Backend
die .scss Dateien bearbeiten. Möchtest du z. B. die Farbwerte der Demo anpassen, kannst du über die
Contao-Dateiverwaltung in der Datei »contaodemo/theme/src/scss/variables/_colors.scss«
Änderungen vornehmen und speichern. Weitere SASS-Variablen findest du in den Dateien »_sizes.scss«, »_fonts.scss«
und »_animation.scss« vor.
Damit die Änderungen an diesen (SASS-Partial) Dateien übernommen werden, musst du allerdings im
Anschluss die »app.scss« einmalig anfassen und speichern (s. a.: »Sass/Less Integration«).
Die von Contao genutzte »scssphp/scssphp« Bibliothek unterstützt u. U. keine aktuellen »Dart Sass« Leistungsmerkmale wie z. B. »@use«, »@forward« oder weitere »Dart Sass« Module.
Das gilt u. U. auch für existierende SASS Erweiterungen z. B. für den »Visual Studio Code« Editor etc.
In diesem Fall ist es, in Verbindung mit einer lokalen Contao Installation und einer puren »Dart Sass«
Installation (s. u.), daher optimaler, die .scss Dateien, den Anforderungen entsprechend, lokal zu kompilieren und
dann nur die final vorliegende .css Datei (demnach app.css) in Contao zu referenzieren.
Die Vorgehensweise zur »Dart Sass« Installation findest du hier. Anleitungen und Tutorials sind zahlreich vorhanden, daher werden wir hier nicht im Detail darauf eingehen.
In Verbindung mit »Node.js« ist es günstig, die »package.json« außerhalb der Contao-Verzeichnisse anzulegen. So
könntest du später auch weitere Contao Installationen bedienen und musst dabei nur die jeweiligen Pfade der SCSS- und
CSS-Verzeichnisse, relativ zur »package.json«, anpassen. Weiterhin besteht die hilfreiche Möglichkeit, die
»SASS-Anweisungen« über »node scripts« einmalig zu definieren und bequem zu starten.
Wenn du die generierte »app.css« der Demo in den Contao Theme-Einstellungen nutzt, fehlen in den Browser Dev-Tools die
Referenzen zu den jeweiligen .scss Abschnitten. Daher werden hierzu »Source Maps« benötigt,
die du automatisch über SASS erstellen und während der lokalen Entwicklung nutzen kannst. Liegt die jeweilige »Source
Map« (.map) neben der »app.css« vor, zeigen die Browser Dev-Tools dann direkt auf die passenden Einträge in den
.scss Dateien.
Dies ist hilfreich für den nächsten Schritt. Mit dem SASS Flag »–watch« wird die Erstellung einer .css Datei
automatisch angestoßen, sobald du Änderungen an den .scss Dateien (inkl. SASS Partials) speicherst, auch über die
Browser Dev-Tools (mit Workspace Freigaben). Einmalig aktiviert, kannst du jetzt direkt Auswirkungen deiner .scss
Anpassungen in den Browser Dev-Tools verfolgen, ändern und speichern.
Für das Beispiel der Farbanpassungen möchten wir, zwecks Übersicht, lediglich die zu ändernden SASS-Variablen
hervorheben. Hierzu legen wir uns im Verzeichnis »scss« eine neue SASS Partial Datei »_custom.scss« an. In diese
kopieren wir lediglich die Variablen aus »variables/_colors.scss«, die wir tatsächlich ändern bzw. überschreiben
möchten.
Wir ändern die Farbwerte in der »_custom.scss« und binden diese als ersten Eintrag in der »app.scss« mittels
»@import« ein. Die neuen Farbangaben werden zwar jetzt eingebunden aber noch nicht
berücksichtigt!
In der »variables/_colors.scss müssen wir hierzu noch das SASS-Flag »!default«
nutzen. Hierüber werden die bestehenden Werte der SASS-Variablen nur dann herangezogen, sofern nicht bereits eine
Definition vorliegt. Dies ist aber über unsere Angaben aus der _custom.scss gegeben und daher werden diese Farbangaben
jetzt berücksichtigt.
Die drei Dateien könnten jetzt in Auszügen so aussehen:
// global colors
$c-primary--50: hsla(30, 100%, 97%, 1) !default;
$c-primary--500: hsla(30, 100%, 48%, 1) !default;
$c-primary--600: hsla(30, 100%, 42%, 1) !default;
$c-primary--700: hsla(30, 100%, 30%, 1) !default;
$c-secondary--700: hsla(207, 44%, 26%, 1) !default;
$c-secondary--800: hsla(207, 44%, 21%, 1) !default;
$c-secondary--900: hsla(207, 44%, 14%, 1) !default;
// background gradients
$gradient--1: radial-gradient(50% 50% at 50% 50%, hsla(207, 44%, 26%, 1) 0%, hsla(207, 44%, 21%, 1) 100%) !default;
...
// ### custom color variables
$c-primary--50: hsla(30, 100%, 97%, 1);
$c-primary--500: hsla(212, 100%, 48%, 1);
$c-primary--600: hsla(212, 100%, 42%, 1);
$c-primary--700: hsla(212, 100%, 30%, 1);
$c-secondary--700: hsla(242, 100%, 25%, 1);
$c-secondary--800: hsla(242, 100%, 21%, 1);
$c-secondary--900: hsla(242, 100%, 14%, 1);
$gradient--1: radial-gradient(50% 50% at 50% 50%, $c-primary--700 0%, $c-secondary--900 100%);
// ### custom variables
@import 'custom';
// ### general variables
...
Die obige Umsetzung könntest du ohne weiteres auch direkt in Contao nutzen. Wie erwähnt, bietet »Dart Sass« aber eben
noch zahlreiche, weitere Möglichkeiten. Statt in der _custom.scss explizit die Farbangaben via »CSS hsla()« zu
definieren, könntest du hierbei auch SASS-Module zur Farb-Konvertierung verwenden.
Weiterhin wäre die Nutzung von »@use« und »@forward« anstelle von »@import«, gerade bei größeren Projekten, nützlich. Hierbei wurden u. a. »Namespaces« eingeführt, die eine eindeutige und sichere Referenzierung ermöglichen.
Möchtest du diese und zukünftige »Dart Sass« Leistungsmerkmale nutzen, kannst du das über einen lokalen Workflow realisieren.
Selbstverständlich bist du dabei, unabhängig von Contao-Versionen, nicht eingeschränkt. So könntest du in deinem Workflow z. B. auch etablierte CSS-Variablen (»custom properties«) oder andere Kombinationen einsetzen.