Entwicklung

CSS: Stile, custom.scss und Theme

Wo eigenes CSS hingehört und wie das Theme-CSS entsteht.

bloqy braucht keinen Build-Schritt. Die Basis ist eine vorgefertigte Tailwind-CSS, alles Eigene schreibst du in SCSS, das bloqy auf dem Server übersetzt.

Wohin mit welchem CSS?

CSS für …	Ort	Im Admin
ein Design eines Blocks	config/modules/<typ>/variants/<id>.scss	Block-Studio → Code → SCSS
einen Stil (z. B. Hintergrund, Abstand)	config/styles/<stil>/style.scss	Gestaltung → Blöcke → Stile → CSS
einen Effekt	config/effects/<id>/effect.scss	Gestaltung → Effekte
eine Komponente	config/components/<name>/component.scss	Entwicklung → Komponenten
alles Übrige	/theme/custom.scss und /theme/scss/	Theme → SCSS-Dateien

Wie Stile, Designs und Theme-Variablen ineinandergreifen und in welcher Reihenfolge das CSS entsteht, steht unter Blöcke, Designs, Stile und Variablen – technisch; alle Variablen unter Variablen.

custom.scss

/theme/custom.scss ist die Hauptdatei der eigenen Anpassungen und bindet die Teildateien unter /theme/scss/ ein. Daraus entsteht automatisch custom.css. Einige Teildateien erzeugt bloqy selbst und überschreibt sie: _variables.scss (aus Theme → Variablen und Farben), _fonts.scss und _module.scss (SCSS aller Designs). Bearbeite diese nicht von Hand. Neue Teildateien hängt bloqy ans Ende von custom.scss, hinter _module.scss; bei gleicher Spezifität gewinnen sie also gegen Designs und Stile.

CSS der Stile

Jeder Stil bringt sein CSS als Paket mit. Bekommt ein Stil einen neuen Wert mit einer Klasse, für die es noch kein CSS gibt, legt bloqy beim Speichern eine leere Regel im Paket an. Neue Fassungen aus Updates zeigen bei angepasstem CSS Update verfügbar mit Vergleich.

Versionen und Fehlersuche

• Vor jeder Änderung sichert bloqy die Datei; Versionen im Code-Editor zeigt und stellt frühere Fassungen wieder her.
• Werkzeuge → Theme neu übersetzen erzeugt das CSS komplett neu.
• Angemeldet zeigen die Entwicklertools des Browsers zu jeder Regel die Quelldatei mit Zeile.