4.4 – Variablen

Eine CSS-Variable ist ein benannter Wert, den die Stylesheets an vielen Stellen einsetzen. Der Variablen-Tab ist die dritte der vier Ebenen: Was hier steht, gewinnt gegen Basis und gegen das Theme.

Links die Variablen, nach Rolle gruppiert, je Zeile, wie viele davon abhängen; rechts die gewählte.

Eine Variable wählen

Links stehen die Variablen, rechts die Leiste zu der, die man gerade gewählt hat. Solange keine gewählt ist, zählt die Leiste, wie viele es gibt und wie viele man selbst geändert hat, und listet die geänderten zum Hinspringen. Mit einer gewählten Variable zeigt sie fünf Abschnitte:

• Aktueller Wert — was im hellen und im dunklen Modus gilt.
• Herkunft — woher der Wert kommt: Quartz-Kern, Community-Theme, letzter Build, ein Stylesheet des Projekts, oder ob man ihn selbst geändert hat. Dazu die Kette bis zum eigentlichen Wert.
• Verwendet diese Variablen — worauf ihr Wert verweist.
• Wird von diesen Variablen verwendet — was sich mitändert. Jeder Name ist ein Sprung dorthin.
• Eigener Wert — die Felder zum Ändern.

Der vierte Abschnitt ist der wichtigste. Steht dort „Ein eigener Wert hier wirkt sich auf 7 weitere Variablen aus.“, ist das keine Warnung, sondern eine Auskunft: Man ändert gerade nicht eine Farbe, sondern eine Familie.

Hell und dunkel

Eine Farbe hat zwei Felder, Hell und Dunkel. Alle anderen Variablen — Größen, Schriften, Abstände — haben ein Feld Hell und dunkel; wo ein Wert auf dunklem Grund anders sein muss, etwa ein Schatten oder eine Schriftstärke, öffnet Im Dunkelmodus abweichend das zweite Feld, und In beiden Modi gleich nimmt es wieder weg. Auf Originalwert zurücksetzen nimmt den eigenen Wert ganz weg.

Ändert man bei einer Variable, die das Theme in beiden Modi verschieden setzt, nur den hellen Wert, gilt die Änderung auch nur im hellen Modus. Der dunkle bleibt, was das Theme sagt, und folgt ihm, wenn man das Theme wechselt. So schreibt QuartzControl das ab 1.1 in Projekten, deren Stile umgestellt sind. In einem Projekt, das noch nicht umgestellt ist, schreibt es den dunklen Wert des Themes ausdrücklich mit, weil ältere Fassungen einen Wert nur für hell nicht lesen können.

Eine Variable, die weder Quartz noch das Theme kennt, etwa aus einer Vorlage, hat keinen Originalwert. Die Leiste sagt das, und statt des Zurücksetzens gibt es Variable entfernen.

Was gewinnt

Die Werte dieser Seite stehen in drei Regeln: eine für beide Modi, eine für den dunklen und eine für Werte, die nur im hellen Modus gelten. Die drei gewinnen gegen Quartz und gegen das Theme, auch wo das Theme dieselbe Variable setzt.

Gegen eigene Regeln in custom.scss gewinnen sie seit 1.1 nicht mehr: Die verwaltete Datei steht vor ihnen, und bei gleichem Selektor gewinnt, was später kommt. Setzt custom.scss eine Variable selbst, die auch hier geändert ist, nennt der Tab sie über der Liste und sagt dazu:

Seit 1.1 steht seine Regel nach denen dieser Seite und gewinnt, wo beide gleich spezifisch sind – die Website zeigt dann den Wert aus custom.scss, nicht den hier.

Die eine Ausnahme ist ein Wert, der nur im hellen Modus gilt: Seine Regel ist spezifischer als ein schlichtes :root und gewinnt im hellen Modus dagegen. Wer so eine Variable in custom.scss selbst setzen will, schreibt :root[saved-theme="light"].

Alle Theme- und Build-Variablen

Unter den Hauptvariablen steht alles, was das aktive Theme, die Plugins oder der letzte Build an Variablen mitbringen — getrennt, weil es sehr viele werden können.

Deshalb steht die Liste nach dem Anfang der Namen gruppiert da — callout, background, table —, jede Gruppe zugeklappt und mit ihrer Anzahl. Namen, die ihren Anfang mit keiner anderen Variable teilen, sammelt am Ende Einzelne Variablen. Wer den Namen schon kennt, sucht ihn; Farben und Andere Werte schränken beides auf eine Art von Wert ein. Der Kopf der Karte sagt, wie viele von wie vielen überschrieben sind. Ein Filter Nur geänderte zeigt, was man selbst angefasst hat.

Steht dort „Es gibt noch keinen Build-Output“, fehlt schlicht die Quelle: einmal bauen, dann Neu einlesen. Bis dahin kennt der Kopf auch die Gesamtzahl nicht und sagt nur, wie viele überschrieben sind.

Was hier nicht geht

Manche Variablen setzt ein Theme nur innerhalb eines bestimmten Elements — die Farben eines Callouts etwa. Solche Werte lassen sich hier nicht global überschreiben, und die Zeile sagt das: „nicht auflösbar (nur in einem Selektor gesetzt)“. Dafür braucht es eigenes CSS.

Hat die Variable selbst einen Wert, aber eine Variable darin nicht, heißt es stattdessen „nicht auflösbar (eine Variable darin hat hier keinen Wert)“ — überschreiben lässt sie sich dann schon, nur das Farbfeld kann nicht zeigen, was daraus wird.

Wann Variablen der richtige Ort sind

Wenn ein Theme fast passt. Eine einzelne Farbe daran zu ändern, ohne das ganze Theme aufzugeben, geht genau hier — und bleibt lesbar, weil ein Zähler sagt, wie viele Abweichungen es inzwischen sind.

Wenn man dagegen mehr als eine Handvoll Werte überschreibt, ist meistens das Theme das falsche.