4.5 – Eigenes CSS

Die vierte und letzte der vier Ebenen. Was hier steht, gewinnt gegen alles andere — und ist damit auch die Ebene, an der ein späteres Theme nicht mehr vorbeikommt.

Eigenes CSS: oben die geltenden Farben und Schriften, darunter der Editor und rechts daneben die Ladereihenfolge.

Die Ladereihenfolge

Quartz bindet nur eine Datei ein: custom.scss. Alles andere wird von dort aus geladen. Die Karte Ladereihenfolge zeigt diese Kette und macht sie bearbeitbar:

• Die Pfeile Nach oben / Nach unten — später geladene Dateien überschreiben frühere.
• Neue Datei; an jeder Zeile ein Stift zum Umbenennen und ein Mülleimer zum Löschen. Gelöscht wird erst nach einer Rückfrage. Das Löschen legt keinen Snapshot an; zurück kommt die Datei nur über git oder einen älteren Snapshot.
• Unter den Dateien steht in einem umgestellten Projekt _quartzcontrol.scss mit dem Zusatz Schriften und Variablen dieser Seite (siehe unten).
• custom.scss selbst steht immer zuletzt und lässt sich nicht verschieben.

Darunter kann eine zweite Liste stehen: Vorhanden, aber nicht eingebunden. Das sind Dateien im Stylesheet-Ordner, die niemand lädt — etwa nach einem Umbau von Hand. Ein Klick auf Einbinden hängt sie in die Kette.

Mehrere Dateien statt einer großen lohnen sich aus demselben Grund wie überall: Man findet wieder, was man gesucht hat. Die Beispielvorlage macht es vor — zwölf Dateien, nach Bereichen geordnet.

Die verwaltete Datei

Was die Stile-Seite selbst schreibt — die Ladereihenfolge, eingebundene Schriften und die Variablen —, steht seit 1.1 in einer eigenen Datei, quartz/styles/_quartzcontrol.scss. custom.scss lädt sie mit einer Zeile vor allen eigenen Regeln:

@use "./quartzcontrol";

Darunter gehört custom.scss wieder ganz einem selbst.

Ein Projekt aus QuartzControl 1.0 hält diese Blöcke noch in custom.scss. Die Stile-Seite sagt das über den Reitern und bietet Jetzt umstellen an:

Dieses Projekt hält Ladereihenfolge, Schriften und Variablen noch in custom.scss, wie QuartzControl 1.0. Umstellen legt sie in eine eigene Datei, quartz/styles/_quartzcontrol.scss. Ältere Fassungen von QuartzControl lesen das Projekt danach ohne Variablen und Stylesheets; arbeitest du auf mehreren Rechnern, stelle erst alle auf 1.1 um.

Umgestellt wird nur auf diesen Klick, nie nebenbei, und vorher legt QuartzControl einen Snapshot an. Solange die Seite ungespeicherte Änderungen hält, ist der Button gesperrt. Ein neu angelegtes Projekt ist von Anfang an umgestellt. Ein nicht umgestelltes Projekt funktioniert weiter wie unter 1.0; es fehlt ihm nur, was die Umstellung braucht, etwa ein Variablenwert, der nur im hellen Modus gilt.

Die Datei lässt sich ansehen: Ein Klick auf ihre Zeile in der Ladereihenfolge öffnet sie im Editor, mit einem Hinweis darüber:

Diese Datei schreibt QuartzControl selbst. Was zwischen den QuartzControl-Markern steht, schreibt jede Änderung an Ladereihenfolge, Schriften oder Variablen auf dieser Seite neu; Text außerhalb der Marker bleibt.

Fehlt die @use-Zeile, fehlen der Website Ladereihenfolge, Schriften und Variablen, ohne dass ein Fehler kommt. Deshalb setzt QuartzControl sie zurück: vor jedem Build und Start des Dev-Servers, und beim Speichern aus diesem Reiter, dann mit dem Satz

In custom.scss fehlte die Zeile @use ”./quartzcontrol”; – sie ist wieder eingesetzt. Ohne sie fehlten der Website Ladereihenfolge, Schriften und Variablen dieser Seite.

Fehlt dagegen die Datei selbst, legt der nächste Build sie leer an; was darin stand, bringt ein Snapshot zurück.

Zusammenlegen

Die Vorlagen bis 1.0 brachten ihre Stile in bis zu 31 Dateien mit, seit 1.1 sind es zwölf. Lädt ein Projekt noch die alte Aufteilung, sagt die Seite das und bietet Zusammenlegen an. Dabei bleibt jede Regel erhalten; sie steht danach abschnittsweise in den neuen Dateien, jeder Abschnitt nach seiner früheren Datei benannt. Eigene Stylesheets bleiben, wie sie sind, und vorher entsteht ein Snapshot. Heißt eine eigene Datei so wie eine der neuen, wird sie umbenannt, und die Seite sagt, wie sie jetzt heißt.

Die Prüfung

Code prüfen übersetzt das Geschriebene, ohne zu bauen. Zwei Antworten:

• „SCSS kompiliert fehlerfrei.“
• „SCSS-Fehler, der Build würde fehlschlagen:“, mit Datei und Zeilennummer und einem Link, der genau dorthin springt.

Das ist die Prüfung, die einen fehlgeschlagenen Build erspart. Auf der Übersicht taucht ihr Ergebnis wieder auf — und dort auch der dritte Zustand: CSS ungeprüft, was weder „gut“ noch „schlecht“ heißt.

Einen Fehler kennt die Prüfung samt Ausweg: Hat eine ältere Fassung von QuartzControl ihre Ladereihenfolge in die der aktuellen geschrieben, steht darunter Ladereihenfolge neu schreiben. Die Reihenfolge bleibt dabei, wie sie ist.

Die Hilfen beim Schreiben

Komponente wählen fügt den Selektor für ein Element der Seite an der Cursor-Position ein — man muss also nicht wissen, wie der Explorer im HTML heißt. Jeder Eintrag nennt den Selektor, den er einfügt — die Klasse, die die Website wirklich rendert. Steht (Klasse ungeprüft) dahinter, kennt QuartzControl das Plugin nicht und rät .<Pluginname>.

Aktuell geltende Farben und Schriften zeigt, was gerade gilt, hell und dunkel, mit Schriftprobe. Die Box beginnt eingeklappt — zusammengefaltet nennt sie nur, wie viele Farben und welche Schriften gelten; ein Klick auf die Überschrift öffnet sie, und QuartzControl merkt sich das, bis das Fenster zugeht. Ein Klick auf ein Farbfeld kopiert den Wert in die Zwischenablage, ein Klick auf einen Schriftnamen die ganze Schriftfolge.

Bei einer Schrift steht gegebenenfalls Ersatzschrift daneben, und QuartzControl erklärt, was das heißt: Die Datei liegt weder im Projekt noch in dessen Build noch auf diesem Rechner, und QuartzControl lädt nichts aus dem Netz — die Probe zeigt also eine andere Schrift als die Website.

Original-Styles (nur lesend) zeigt, was Quartz selbst schreibt. Zum Nachsehen, nicht zum Ändern.

Wenn zwei Tabs dieselbe Datei anfassen

Die Dateien dieses Reiters werden nicht nur im Editor geschrieben: Eine Variablen-Überschreibung, ein Schrift-Import und jede Änderung an der Ladereihenfolge schreiben die verwaltete Datei neu, in einem nicht umgestellten Projekt custom.scss. Ändert sich eine Datei so, während hier ein ungespeicherter Entwurf von ihr steht, sagt QuartzControl, wodurch — Speichern würde diese Änderung überschreiben — und bietet an, von der Festplatte neu zu laden.

Wann eigenes CSS der richtige Ort ist

Wenn es keinen anderen gibt. Drei Fälle sind das regelmäßig:

1. Werte, die ein Theme nur innerhalb eines bestimmten Elements setzt (Callout-Farben etwa) — im Variablen-Tab als nicht auflösbar markiert.
2. Struktur statt Farbe: Abstände, Rahmen, Umbrüche.
3. Die bekannten Konflikte, für die QuartzControl den Fix als normale Datei hier anlegt.

Eine Variable, die auch auf der Variablen-Seite geändert ist, in custom.scss noch einmal zu setzen, geht — dann gewinnt aber custom.scss (Was gewinnt).