Wenn wir eine responsive Webseite bauen, haben wir heute oftmals sehr umfangreiche Style Sheets. Das bringt eine fehlende Übersicht, viele Dateien und damit viele Netzwerkzugriffe sowie lange Ladezeiten mit sich. Auch binden wir oft CSS und JavaScript Frameworks wie Bootstrap in unsere Projekte ein. Um diese miteinander zu verbinden, Daten sowie Ladezeiten zu sparen und mehr Übersicht über alle Module zu schaffen, können wir Precompiler wie SASS oder LESS nutzen. Im Folgenden beschreiben wir Strategien zur Einbindung von SCSS / SASS Dateien in ein TYPO3 Projekt mit Boostrap 5.

SASS und LESS sind so genannte Precompiler oder Preprocessor. Beide Sprachen dienen dazu, einen strukturierten Code zu schreiben, aus dem dann lauffähiges CSS generiert wird. Dabei gibt es Möglichkeiten, diesen Code von einem Browser selbst oder von einem Framework auf dem Webserver zur Laufzeit zu nutzen, um CSS-Code generieren zu lassen. Dies ist nicht unbedingt die beste Variante, weil dadurch bei Server und ggf. Browser mehr Arbeit für die immer gleichen Aufgaben anfällt. Besser ist es in diesem Fall, den Precompiler zu nutzen, um ein oder mehrere CSS-Dateien zu erzeugen, die dann von der Webseite geladen werden.

Die Vorteile dabei:

• Alle CSS-Frameworks können ihre eigenen Styles in eine einzige CSS-Datei schreiben, dies verringert die Zahl der Netzwerkzugriffe erheblich.
• Die Datei kann bereits bei der Generierung minimiert werden, was die Ladezeit verringert
• Der Code der SASS-Dateien kann hierarchisch gegliedert und aufgebaut werden
• Wiederholte Codeblöcke wie Farben, Border Radius oder andere Styles können als mixins in Funktionen abgelegt und ggf. mit Übergabe von Variablen eingebunden werden

Die hierarchische Struktur des Quellcodes in SCSS erlaubt es bei der Nutzung von SASS, Eigenschaften von Styles zu vererben. Dies ist ein großer Vorteil, wenn man Blöcke des CSS so anordnet, dass sich die einzelnen HTML-Elemente in absteigender Reihenfolge ansprechen lassen. Als Beispiel hier ein Auszug aus dem Style für den Blog der TYPO3 Webseite der Agentur IBK:

#bloggrid {
  article {
    &.blog-grid-content {
      padding: 10px 5px 40px 10px;
      background-color: $blau-hell;

      &:hover {
        background-color: $blau-leicht;
        box-shadow: 0px 0px 10px 2px $blau-stark;
        color: #eee;
        transition: all ease 0.5s; 
      
        & > p:nth-child(1) {
          color: #fff;
          transition: all ease 0.5s;
        }
      }

      & > p {
        font-size: 0.7rem;
      }
      & > p:nth-child(1) {
        font-size: 0.9rem;
        color: $blau-stark;
      }

      & > p:nth-child(2) {
        margin-bottom: 5px;
      }
      & > p:nth-child(4) > a {
        position: absolute;
        text-align: center;
        bottom: 10px;

        @media (max-width: 575px) {
          width: calc(100% - 24px);
        }
        @media (min-width: 576px) and (max-width: 991px) {
          width: 80%;
        }
        @media (min-width: 992px) {
          width: calc(100% - 44px);
        }
      }
    }
  }
}

Im Folgenden schildern wir einige der grundlegenden Elemente, mit denen man in SASS strukturierten Code zur Erzeugung des CSS aufbauen kann.

#bloggrid {
  headline {
    h1 {
      font-size: 2rem;
    }
    h2 {
      font-size: 1.5rem;
    }
  }
  article {
    &.blog-grid-content {
      padding: 10px 5px 40px 10px;
    }
  }
}

Der große Vorteil der Sprache SCSS ist, dass man einen ganzen Block an CSS-Anweisungen hierarchisch gliedern kann. Den über die ID bloggrid gekennzeichneten Block müssen wir nur einmal angeben. Damit sparen wir uns Arbeit und Möglichkeiten, Fehler zu machen. SASS kompiliert das CSS später so, dass allen Styles in diesem Block der Selector #bloggrid vorangestellt wird.

Auch den Style headline müssen wir nur einmal angeben. Die Überschriften h1 und h2 in der Hierachieebene darunter können wir nun bequem einzeln ansprechen.

Auf die Klasse article können ebenfalls beliebig viele weitere hierarchisch gegliederte Klassen folgen. Die Klasse .blog-grid-content folgt direkt in der Root der Klasse article, dies wird beim Kompilieren durch das & generiert.

Aus dem obigen Beispiel ergibt sich eine übersichtliche Struktur für hierarchisch aufeinander aufbauende Klassen im CSS, die wir in SCSS ineinander verschachteln können:

&.blog-grid-content {
  padding: 10px 5px 40px 10px;
  background-color: $blau-hell;

  &:hover {
    background-color: $blau-leicht;
    box-shadow: 0px 0px 10px 2px $blau-stark;
    color: #eee;
    transition: all ease 0.5s; 
     
    & > p:nth-child(1) {
      color: #fff;
      transition: all ease 0.5s;
    }
  }
}

CSS Layouts wie einen Hover-Effekt können wir in SCSS einfach als Kindelement der zugehörigen Klasse notieren, wie an diesem Beispiel ersichtlich. Wichtig ist die Angabe des &, damit SASS das Hover als Pseudoelement richtig kompiliert. Auch hier ersparen wir uns die Angabe der gesamten Klasse und vermeiden Fehler.

Auch die Eingabe eines Media Query in CSS wird in SASS mit SCSS leichter. Wir können die gewünschten Styles direkt dort eingeben, wo sie anfallen. Im Gegensatz zum reinen CSS brauchen wir die Codeblöcke nicht dem Media Query zuzuordnen, sondern können das direkt an der jeweiligen Klasse tun. Das macht das Auffinden von Style Definitionen deutlich einfacher. SASS kompiliert den Media Query mit anderen Klassen dann später zu einem Block. Hier ein Beispiel für einen Media Query mit SCSS:

& > p:nth-child(4) > a {
  bottom: 10px;

  @media (max-width: 575px) {
    width: calc(100% - 24px);
  }
  @media (min-width: 576px) and (max-width: 991px) {
    width: 80%;
  }
  @media (min-width: 992px) {
    width: calc(100% - 44px);
  }
}

Dieser Teil des Code Blocks sieht im fertig kompilierten CSS später so aus:

@media (max-width: 575px) {
  #bloggrid article.blog-grid-content > p:nth-child(4) > a {
    width: calc(100% - 24px);
    left: 12px;
    right: 12px;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  #bloggrid article.blog-grid-content > p:nth-child(4) > a {
    width: 80%;
    left: 10%;
    right: 10%;
  }
}
@media (min-width: 992px) {
  #bloggrid article.blog-grid-content > p:nth-child(4) > a {
    width: calc(100% - 44px);
    left: 22px;
    right: 22px;
  }
}

Ein weiterer Vorteil von SASS und LESS ist es, dass man Angaben zu Farben nicht gefühlt 100x im Style Sheet angeben (und später ändern!) muss, sondern dass man eine Variable generiert. Dazu kann man mixins als Funktionen schreiben, die man später einbinden, wenn nötig mit der Übergabe von Variablen.

Um einen Transition Effekt zu realisieren, der immer gleiche Variablen für Dauer und Verlauf der Animation enthält, können wir ein Mixin schreiben, dass keine Variablen übergeben bekommt:

@mixin transition05() {
  transition: all ease 0.5s;
}

In unserem SCSS können wir dieses Mixin dann per @include einbinden:

@include transition05();

Im CSS wird dann der oben angegebene CSS Code kompiliert.

Jeder Frontend Entwickler kennt die wundervolle Tätigkeit im CSS, wenn man kleine Änderungen in der Farbgebung einer Webseite vollziehen muss. Mann durchsucht alle Style Sheets einer Webseite nach einem bestimmten Quellcode und ersetzt diesen per Hand. Später beim Deployment vergisst das System dann entweder eine Datei oder es hängt noch was im Cache. Genug Gründe, über eine schlauere Arbeitsweise nachzudenken.

Im CSS selber geht dies bereits über das Root Prinzip. SASS geht einen Schritt weiter und erlaubt das Anlegen von Variablen. Dazu definiert man entsprechende Variablen mit Farbwerten:

$blau-stark: #275ba4;
$blau-dark: #0b2954;
$blau-leicht: #729ebd;
[...]

Die Farben kann man dann an beliebiger Stelle als Variable einbinden:

h1, h2, h3 {
  color: $blau-stark;
  clear: both;
}

Wenn man nun eine Farbe an vielen Stellen für die gesamte Webseite ändern muss, ändert man an einer Stelle den Wert der Variable, kompiliert SASS zu CSS, geht in den Deployment Prozess, löscht den Cache und die Webseite erstrahlt in neuen Farben.

Diese Farbwerte kann man auch innerhalb eines Mixin verarbeiten, wie das folgende Beispiel zeigt.

Wenn wir als Beispiel einen Transition Effekt über der Übergabe des Zeitraums der Animation als Mixin schreiben wollen, können wir die Zeitangabe als Variable übergeben. Hier ein Codebeispiel für die Funktion:

@mixin transition($duration) {
  transition: all ease $duration;
}

Im SASS Style Sheet wird diese Variable dann reingeschrieben:

@include transition(0.5s);

Das Ergebnis ist das gleiche wie oben. Wir haben aber nun nur noch eine Funktion für alle Transitions. Dieses Konzept könnte man noch weiter verfeinern, indem man weitere Variablen wie die Art der Animation übergibt. Richtig interessant wird es allerdings, wenn man mit Hilfe von SCSS richtig viel Quellcode beim Schreiben von Klassen einsparen kann.

Ein Beispiel für ein Mixin in SCSS, mit dem man über eine Funktion jede Menge Arbeit im CSS einsparen kann, sind Farbverläufe. Um Browserkompatibilität herzustellen, wollen wir mehrere Klassen je nach Browser Engine nutzen. Die Farben übergeben wir als Variablen. Die Funktion sieht dann als Beispiel so aus:

@mixin fn-linear-gradient($color-start, $color-end) {
  background: -webkit-linear-gradient($color-start, $color-end); 
  background: -o-linear-gradient($color-start, $color-end);
  background: -moz-linear-gradient($color-start, $color-end);
  background: linear-gradient($color-start, $color-end);
}

Anstatt vier Zeilen Code zu schreiben, müssen wir nun nur noch eine Zeile Code einbinden:

@include fn-linear-gradient($blau-stark, $blau-leicht);

Im kompilierten CSS sieht dieser Code dann so aus:

.background-example {
  background: -webkit-linear-gradient(#275ba4, #729ebd);
  background: -o-linear-gradient(#275ba4, #729ebd);
  background: -moz-linear-gradient(#275ba4, #729ebd);
  background: linear-gradient(#275ba4, #729ebd);
}

Ein weiterer großer Vorteil der Arbeit mit SASS ist, dass man bei der Generierung des CSS gezielt auswählen kann, was für ein Projekt überhaupt notwendig ist. Der Gedanke dahinter: In einer TYPO3 Webseite binden wir neben unserem eigenen CSS oft noch weitere CSS- und JavaScript-Frameworks wie Bootstrap oder Font Awesome ein. Diesen Prozess können wir aus TypoScript herausnehmen und per SASS steuern. Dieses Verhalten erweist sich auch als guter Faktor zur SEO: Für die Suchmaschinenoptimierung sollten wir für möglichst geringe Datenmengen sorgen. Auch hier können wir mit SASS einiges steuern.

In einer TYPO3 Webseite ist es üblich, Bootstrap über TypoScript in die Webseite einzubinden:

page {
  includeCSS {
    css10 = EXT:provider/Resources/Public/bootstrap/css/bootstrap.min.css
    css10.media = all
  }
}

Dies ist ein erprobtes und bewährtes Verhalten. Wenn man die Live Seite im TYPO3 Config korrekt eingestellt hat, werden ohnehin alle Style Sheets zu möglichst wenigen Dateien zusammengefasst (Concatinate) und komprimiert (Compress). Es gibt aber zudem die Möglichkeit, die Erstellung des gesamten Style Sheets der TYPO3 Webseite von TypoScript auf SASS zu verlagern. Die Vorteile dabei:

• Alle Style Sheets werden bereits beim Kompilieren zu einer einzigen CSS Datei zusammengefasst
• Die Dateien können bereits beim Kompilieren mit SASS komprimiert werden
• Wir haben die Kontrolle über alle Module, die ins Projekt eingebunden werden

Wenn wir unser eigenes SASS Style anlegen, nutzen wir eine Datei, in der wir notieren, welche Elemente eingebunden wird. Über diese Datei steuern wir das Projekt. Dieser Datei geben wir alle SCSS Module mit, die wir selbst schreiben. Hier ein Beispiel für den Aufbau der SASS Datei:

@import "Content/_root";
@import "Content/_fonts";
@import "content/_content";
@import "Content/_navigation";

Dieses Konzept können wir erweitern. Anstatt wie oben beschrieben Boostrap per TypoScript als CSS in die Webseite einzubinden, können wir nun die SCSS Sourcen von Bootstrap einbinden und unser eigenes Projekt damit kompilieren. Dazu ergänzen wir unsere SASS Datei:

@import "bootstrap/scss/bootstrap";
@import "Content/_root";
@import "Content/_fonts";
@import "content/_content";
@import "Content/_navigation";

Dabei sollten wir die Reihenfolge beachten, denn gerade bei einer Navigation überschreiben wir gerne Klassen von Bootstrap und deshalb sollte die Reihenfolge der Dateien eingehalten werden.

Nun binden wir die kompilierte Datei mit TypoScript in unser Projekt ein:

page {
  includeCSS {
    css10 = EXT:custom/Resources/Public/css/styles.css
    css10.media = all
  }
}

Der Link entspricht der Konfiguration in dem Beispiel für die Task.json im letzten Punkt.

Kommen wir zum letzten und vielleicht wichtigsten Grund, jedenfalls aus Sicht der Suchmaschinenoptimierung, warum wir Bootstrap als SASS in unsere TYPO3 Webseite einbinden und nicht als CSS: Wir wollen Daten und Ladezeiten sparen! Wenn man mit Google Lighthouse oder dem dazu gehörenden Tool PageSpeed Insights arbeitet, wird sich freuen, wenn man die Zahl der Ressourcen, die das Rendering behindern, reduzieren kann. Diese Betrachtung sollte bei der SEO einer TYPO3 Webseite nicht fehlen.

Wie oben beschrieben binden wir also Bootstrap über eine SCSS Datei in unser Projekt ein - hier ist das übrigens die Standard Variante; wenn man die z. B. Navigation nicht braucht, kann man auch eine andere wählen.

@import "bootstrap/scss/bootstrap";

Das Verzeichnis können Sie selber natürlich selbst definieren und wählen. Im hier geschilderten Verzeichnis liegt nun die Datei bootstrap.scss mit der Einbindung aller Module, auf die Sie zugreifen können. Hier ein Auszug aus dieser Datei:

// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
[..]
@import "accordion";
@import "breadcrumb";
@import "pagination";
[..]
// scss-docs-end import-stack  

An dieser Stelle sollten Sie darüber nachdenken, was Sie für Ihr Projekt brauchen. Sind Accordions in Ihre Webseite eingebunden? Nutzen Sie ein anderes Framework für Slider? Dann können Sie diese Elemente auskommentieren oder löschen. Damit können Sie eine Menge Ladezeit einsparen. Für erfolgreiche SEO sollten Sie diese Arbeit in Betracht ziehen.

In den Ausführungen oben haben wir beschrieben, was SASS bzw. SCSS ist und ein paar Codebeispiele gesehen. Wie aber erstellt man aus SASS einen lauffähigen CSS Code? Dazu gibt es Programme, die uns das Kompilieren erlauben. Voraussetzung dazu ist in der Regel immer der Einsatz des Node JS Paket Manager (NPM) für die Installation von SASS. Je nachdem welche Programmierumgebung man nutzt gibt es verschiedene weitere Schritte. Hier ein Beispiel für den Einsatz von Visual Studio Code:

Eine in dem Beispiel genannte Datei Task.json kann wie folgt aussehen:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "SASS zu CSS kompilieren",
      "type": "shell",
      "command": "sass 
        C:/xampp/htdocs/web/typo3conf/ext/custom/Resources/Public/scss/styles.scss 
        C:/xampp/htdocs/web/typo3conf/ext/custom/Resources/Public/css/styles.css",
      "group": "build"        
    }
  ]
}

Auf der TYPO3 Webseite unserer Agentur haben wir weitere Tipps und Code Snippets für Sie, wenn Sie sich mit Gedanken zu SEO in Zusammenhang mit SASS und jQuery tragen: