CSS mit Superkräften

Du kannst SASS mittels einer zusätzlichen Extension oder direkt u.a. per SASS oder Compass zu CSS kompilieren. Threeme liefert dir das SASS mit, aber KEIN fertiges CSS. Du entscheidest!

Für den nativen Weg wird eine config.rb mitgeliefert (Abb.4), die du nach deinen Wünschen anpassen kannst. Am einfachsten ist natürlich, einen SASS Compiler wie die Extension ws_scss zu installieren. Threeme kann diese Extension nutzen, dazu finden sich die folgenden Einstellungen in der constants.txt:

{$threeme.enable.useSassExt} aktiviert den SASS Compiler, während {$threeme.enable.compileRteCssFromSass} ein Workaround für die separate CSS des RTE darstellt, denn die TYPO3 Compiler Extensions berücksichtigen meist nur die Einbindung über page.includeCSS:

Aktivierst du die Konstante, bindet Threeme die RTE-CSS im Frontend ein, sodass der Compiler sie neu erstellt. So können Änderungen in die RTE-CSS übernommen werden. Danach deaktivierst du einfach wieder die Konstante.

Anmerkung:

Schaue dir die Erklärungen und das TypoScript in der page.ts genau an und stelle sicher, dass das Frontend nicht gecached ist, wenn die RTE-CSS eingebunden werden soll. Manchmal wird auch einfach keine RTE-CSS erzeugt, da der Compiler keine Änderungen im zugrunde liegenden SASS erkannt hat. Dann hilft es kurz Müll in die _styles-rte.scss zu schreiben und das Frontend aufzurufen. Jetzt sollte der Compiler einen Fehler werfen und du weißt, RTE-CSS wird eingebunden, Änderungen übernommen.

Der Kern der Struktur ist das Verzeichnis Frontend. Dies ist wiederum unterteilt in bisher unbekannte Unterverzeichnisse, die im Folgenden genauer erklärt wird.
Der Kerngedanke bei der von Threeme angebotenen Organisation ist, den Fokus möglichst zu konzentrieren und trotz etlicher Verzeichnisse und Dateien, nicht ständig springen zu müssen und somit den Überblick zu wahren.

Aus diesem Grund versucht Threeme SASS sozusagen nach dem Verwendungszweck zu klassifizieren und einzuordnen und orientiert sich dabei am Atomic Design:

Components

Components sind wiederkehrende SASS patterns, die in der gesamten Website vorkommen können und Atomen, Moleküle und ganze Organismen entsprechen.

Library

Beinhaltet nur Variablen und Mixins, die nicht unmittelbar zu CSS kompiliert werden. Da Threeme Bibliotheken von Drittanbietern nicht verändern möchte, allerdings auf deren Variablen angewiesen ist, wird hier eine Kopie der Bibliothek-Variablen abgelegt. Threeme eigene Mixins und Variablen liegen hier.

Sections

Sections stellen das Gegenteil zu Components dar: Diese SASS kommen nur einmalig in der Website vor und bilden somit den gröberen Rahmen, indem sie beispielsweise den Header oder Footer der Site beschreiben.

Drittanbieter-Erweiterungen legen ihr SASS analog zu den Fluid-Templates im Verzeichnis Extensions ab. Threeme liefert eine angepasste custom.scss je nach Erweiterung mit (Abb.3). Darüber hinaus kannst du selbstverständlich auch weitere, differenzierte SASS für deine Extensions anlegen.

Anhand der Extension Mask kannst du erkennen, dass es nicht immer möglich ist, haarscharf die Trennung nach Verwendungszweck und oder Extension aufrecht zu erhalten:

Mask stellt vorhandene oder erweiterte Inhaltselemente bereit, beispielsweise ein Akkordeon. Lege ich nun ein Akkordeon in Mask an und ordne das SASS entsprechend zu, wird der Aufbau aber auch in anderen Teilen der Website – wie beispielsweise einer Ansicht des News-Systems – verwendet, so ist meine Zuordnung der Akkordeon-SASS zu Mask nicht ganz richtig. Besser, die SASS läge in Components, ist allgemeingültig und kann bequem von mehreren Seiten verwendet werden.