Richten Sie „Variablen“ für Farben in CSS ein

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ich sage „Variable“, weil CSS keine echten Variablen nativ unterstützt. Die Debatte darüber, ob es das sollte oder nicht, ist ziemlich hitzig. Ich werde dazu keine Stellung beziehen, aber es gibt einen cleveren kleinen Hack, der herumgeht, wie man dasselbe mit einem kleinen zusätzlichen Schritt erreicht. Zumindest für Farben. Es ist so einfach wie das Einfügen eines auskommentierten Abschnitts in Ihr CSS, wie dieser:

/* 
   Light Blue: #afd2f0
   Dark Blue: #0f4574
   Bright Red: #fa0606

   Link Color: #3674bb
   Post Background Color: #fffbd8
   Post Title Color: #9a8f2e
*/

Im gesamten CSS verwenden Sie diese Hex-Werte für die entsprechenden Objekte. Wenn Sie dann beispielsweise die Farbe für Ihre Linkfarbe ändern möchten, führen Sie einfach eine Suche/Ersetzung dieses Hex-Codes in einem beliebigen Texteditor durch.

findreplacetextmate.png

Ein zusätzlicher Schritt im Vergleich zu dem, was eine Variable leisten könnte, aber es ist auf jeden Fall besser, als zu suchen, wo genau welche Farbe geändert werden muss.