Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
— | sass_css [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== SASS und CSS in TYPO3 ====== | ||
+ | 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: Precompiler ===== | ||
+ | |||
+ | 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, | ||
+ | |||
+ | 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 | ||
+ | |||
+ | <WRAP left info 100%> | ||
+ | [[https:// | ||
+ | </ | ||
+ | |||
+ | ===== SCSS Beispiele für SASS Source Code ===== | ||
+ | |||
+ | 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 { | ||
+ | & | ||
+ | padding: 10px 5px 40px 10px; | ||
+ | background-color: | ||
+ | | ||
+ | &:hover { | ||
+ | background-color: | ||
+ | box-shadow: 0px 0px 10px 2px $blau-stark; | ||
+ | color: #eee; | ||
+ | transition: all ease 0.5s; | ||
+ | | ||
+ | & > p: | ||
+ | color: #fff; | ||
+ | transition: all ease 0.5s; | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | & > p { | ||
+ | font-size: 0.7rem; | ||
+ | } | ||
+ | & > p: | ||
+ | font-size: 0.9rem; | ||
+ | color: $blau-stark; | ||
+ | } | ||
+ | | ||
+ | & > p: | ||
+ | margin-bottom: | ||
+ | } | ||
+ | & > p: | ||
+ | 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. | ||
+ | |||
+ | ==== SCSS Codeblock für eigenständiges Layout im CSS ==== | ||
+ | |||
+ | #bloggrid { | ||
+ | headline { | ||
+ | h1 { | ||
+ | font-size: 2rem; | ||
+ | } | ||
+ | h2 { | ||
+ | font-size: 1.5rem; | ||
+ | } | ||
+ | } | ||
+ | article { | ||
+ | & | ||
+ | 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 '' | ||
+ | |||
+ | Auch den Style '' | ||
+ | |||
+ | Auf die Klasse '' | ||
+ | |||
+ | ==== Hierarchische Struktur der Klassen im CSS ==== | ||
+ | |||
+ | 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: | ||
+ | |||
+ | & | ||
+ | padding: 10px 5px 40px 10px; | ||
+ | background-color: | ||
+ | | ||
+ | &:hover { | ||
+ | background-color: | ||
+ | box-shadow: 0px 0px 10px 2px $blau-stark; | ||
+ | color: #eee; | ||
+ | transition: all ease 0.5s; | ||
+ | |||
+ | & > p: | ||
+ | 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 ''&'', | ||
+ | |||
+ | ==== Media Queries in SASS ==== | ||
+ | |||
+ | 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: | ||
+ | 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: | ||
+ | width: calc(100% - 24px); | ||
+ | left: 12px; | ||
+ | right: 12px; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 576px) and (max-width: 991px) { | ||
+ | #bloggrid article.blog-grid-content > p: | ||
+ | width: 80%; | ||
+ | left: 10%; | ||
+ | right: 10%; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | #bloggrid article.blog-grid-content > p: | ||
+ | width: calc(100% - 44px); | ||
+ | left: 22px; | ||
+ | right: 22px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | ===== Variablen und wiederholte Angaben über mixins ===== | ||
+ | |||
+ | |||
+ | 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. | ||
+ | |||
+ | ==== Mixin für Transition Effekt (statisch) ==== | ||
+ | |||
+ | Um einen Transition Effekt zu realisieren, | ||
+ | |||
+ | @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. | ||
+ | |||
+ | ==== Farben mit Mixins als Variablen definieren ==== | ||
+ | |||
+ | 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 [[css_beispiele# | ||
+ | |||
+ | $blau-stark: | ||
+ | $blau-dark: #0b2954; | ||
+ | $blau-leicht: | ||
+ | [...] | ||
+ | |||
+ | 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, | ||
+ | |||
+ | |||
+ | ==== Mixin für Transition Effekt mit Übergabe von Variablen ==== | ||
+ | |||
+ | 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. | ||
+ | |||
+ | ==== Mixin mit mehreren Variablen für Farbverläufe in CSS ==== | ||
+ | |||
+ | Ein Beispiel für ein '' | ||
+ | |||
+ | @mixin fn-linear-gradient($color-start, | ||
+ | background: -webkit-linear-gradient($color-start, | ||
+ | background: -o-linear-gradient($color-start, | ||
+ | background: -moz-linear-gradient($color-start, | ||
+ | background: linear-gradient($color-start, | ||
+ | } | ||
+ | |||
+ | Anstatt vier Zeilen Code zu schreiben, müssen wir nun nur noch eine Zeile Code einbinden: | ||
+ | |||
+ | @include fn-linear-gradient($blau-stark, | ||
+ | |||
+ | Im kompilierten CSS sieht dieser Code dann so aus: | ||
+ | |||
+ | .background-example { | ||
+ | background: -webkit-linear-gradient(# | ||
+ | background: -o-linear-gradient(# | ||
+ | background: -moz-linear-gradient(# | ||
+ | background: linear-gradient(# | ||
+ | } | ||
+ | | ||
+ | ===== CSS Module per SASS auswählen: Ladezeit sparen ===== | ||
+ | |||
+ | Ein weiterer großer Vorteil der Arbeit mit '' | ||
+ | |||
+ | |||
+ | ==== Bootstrap per SASS einbinden ==== | ||
+ | |||
+ | In einer TYPO3 Webseite ist es üblich, '' | ||
+ | |||
+ | page { | ||
+ | includeCSS { | ||
+ | css10 = EXT: | ||
+ | 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 ('' | ||
+ | |||
+ | * 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 " | ||
+ | @import " | ||
+ | @import " | ||
+ | @import " | ||
+ | |||
+ | Dieses Konzept können wir erweitern. Anstatt wie oben beschrieben Boostrap per TypoScript als CSS in die Webseite einzubinden, | ||
+ | |||
+ | @import " | ||
+ | @import " | ||
+ | @import " | ||
+ | @import " | ||
+ | @import " | ||
+ | |||
+ | 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: | ||
+ | css10.media = all | ||
+ | } | ||
+ | } | ||
+ | |||
+ | Der Link entspricht der Konfiguration in dem Beispiel für die '' | ||
+ | |||
+ | ==== Bootstrap SCSS Module per SASS steuern: SEO! ==== | ||
+ | |||
+ | Kommen wir zum letzten und vielleicht wichtigsten Grund, jedenfalls aus Sicht der **Suchmaschinenoptimierung**, | ||
+ | |||
+ | 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 " | ||
+ | | ||
+ | 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 " | ||
+ | @import " | ||
+ | @import " | ||
+ | @import " | ||
+ | | ||
+ | // Layout & components | ||
+ | @import " | ||
+ | @import " | ||
+ | @import " | ||
+ | @import " | ||
+ | @import " | ||
+ | @import " | ||
+ | [..] | ||
+ | @import " | ||
+ | @import " | ||
+ | @import " | ||
+ | [..] | ||
+ | // 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? | ||
+ | ===== SASS kompilieren: | ||
+ | |||
+ | In den Ausführungen oben haben wir beschrieben, | ||
+ | |||
+ | <WRAP left tip 100%> | ||
+ | [[https:// | ||
+ | </ | ||
+ | |||
+ | Eine in dem Beispiel genannte Datei **Task.json** kann wie folgt aussehen: | ||
+ | |||
+ | { | ||
+ | // See https:// | ||
+ | // for the documentation about the tasks.json format | ||
+ | " | ||
+ | " | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | C:/ | ||
+ | C:/ | ||
+ | " | ||
+ | } | ||
+ | ] | ||
+ | } | ||
+ | |||
+ | Auf der '' | ||
+ | | ||
+ | <WRAP left tip 100%> | ||
+ | [[https:// | ||
+ | </ | ||
+ | |