Custom SCSS
Get Started
Seit TYPO3 Theme 4.0.1 sind. custom.scss und variables.scss optional.
Mit ihnen kann das Theme Layout flexibel erweitert und angepasst werden.
custom.scss
Die custom.scss dient dazu zusätzliche Komponenten zu definieren oder bestehende Komponenten zu überschreiben. Es sollten und können Bootstrap @mixins und @includes oder (mit Vorsicht) auch @extends verwendet werden. Unten in den Best Practises ist ein @includes Beispiel. Alle Bootstrap sowie Theme Variablen können verwendet werden, sollten aber nicht in der custom.scss überschrieben werden, dafür ist die variables.scss. Das bedeutet also: background: primary; ist gold-richtig!
Aber: $primary: red; ist böse in der custom.scss
Sollten aber ganz neue Variablen für die custom.scss erforderlich sein, diese dann bitte schon direkt in der custom.scss definieren.
variables.scss
Hier können bestehende Variablen von Bootstrap oder vom TYPO3 Theme (auch die in den Constants) überschrieben werden. Es dürfen keine neuen Variablen in der variables.scss definiert werden, da die Datei nur genutzt werden soll um Bootstrap oder TYPO3 Theme Variablen zu verändern.
Constants.txt, variables.scss, custom.scss
Das Zusammenspiel von contstants.txt, variable.scss und custom.scss ist sehr flexibel - aber auch komplex. Man muss aufpassen, dass man sich nicht selbst ins Knie schießt! Wird in einer Constante zum Beispiel: $breadcrumb-divider-color: red; gesetzt dann kann man das nicht mehr in der variable.scss überschreiben, wird aber in einer Constanten: $breadcrumb-divider-color: $primary; gesetzt kann man in der variable.scss das $primary überschreiben ... und dass $primary kann man ja selbst auch wieder in den Constanten setzen. Dieses komplexe Geflecht braucht klare Regeln:
- Definiere keinen SCSS Variablen in der variables.scss, wenn du sie eigentlich schon in den Constanten-Einstellungen mit dabei hast. Ändere also immer besser bestehende Constanten-Einstellungen statt diese mit der variable.scss zu überschreiben!
- Verwende in den Constanten wenn möglich Bootstrap oder Theme Variablen wie $primary statt tatsächliche Werte #ff0000;
Setup easalliy
Dateien im Fileadmin speichern und den Speicherort in die Constants Typoscript bekannt geben:
# Admin - Custom SCSS
plugin.tx_typo3projectprovider.config__customScssFile = fileadmin/typo3projectprovider/Resources/Public/Css/custom.scss
plugin.tx_typo3projectprovider.config__variablesScssFile = fileadmin/typo3projectprovider/Resources/Public/Css/variables.scss
Best Practises
Don't use @media()
Statt @media Queries sollten in der custom.scss die bootstrap scss helper @includes verwendet werden. Damit ist es möglich die sm, md, lg, xl sowohl nach oben als auch nach unten anzusprechen.
Beispiel
@include media-breakpoint-down(md) {
h3 {
font-size: 18px;
}
}
Alle h3 unterhalb von md sollen in 18px Schriftgöße sein. Mit media-breakpoint-up(md) würden alle h3 oberhalb von md angesprochen. Das ganze wird hier noch mal erklärt: https://getbootstrap.com/docs/4.1/layout/overview/