Ein Beispiel:
Über CSS sollen Statusmeldungen oder Buttons auf Ihrer Website in vier unterschiedliche Layouts erstellt werden. Diese erhalten jeweils eine unterschiedliche Hintergrund-Farbe:
- Success: #CBFC90 (Grün)
- Info: #2EB9CC (Blau)
- Warning: #FCFA90 (Gelb)
- Danger: #CC532E (Rot)
Nun stellt sich nur noch die Frage nach der Text-Farbe innerhalb der Box: Hell oder Dunkel? Schwarz oder Weiß?
Mit Hilfe von SASS können Sie diese Entscheidung getrost der lightness()-Funktion überlassen. Diese berechnet über den RGB-Durchschnittswert die Helligkeit in einem Wert zwischen 0 – 100. Je höher die Zahl, desto heller die Farbe.
Um einen guten Kontrast zu gewährleisten wird dank einer kleinen Funktion in SASS der Text dunkel, wenn die Hintergrund-Farbe heller ist als 50%. Bei dunkleren Farben wie zum Beispiel Blau, wird der Text weiß gefärbt.
Die Hintergrund-Farben der Statusmeldungen oder Buttons können nun jeder Zeit angepasst werden. Ihre kleine und smarte Lösung kümmert sich um den Rest:
SASS
// FUNKTION ZUR BERECHNUNG DER TEXT-FARBE @function setColorByBackground($backgroundColor) { @if (lightness($backgroundColor) > 50) { @return #000000; } @else { @return #FFFFFF; } } $success-color: #CBFC90; $info-color: #2EB9CC; $warning-color: #FCFA90; $danger-color: #CC532E; .infobox-success { padding: 20px; margin: 20px; font-size: 1em; background: $success-color; color: setColorByBackground($success-color); } .infobox-info { @extend .infobox-success; background: $info-color; color: setColorByBackground($info-color); } .infobox-warning { @extend .infobox-success; background: $warning-color; color: setColorByBackground($warning-color); } .infobox-danger { @extend .infobox-success; background: $danger-color; color: setColorByBackground($danger-color); }
HTML
<div class="infobox-success">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div> <div class="infobox-info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div> <div class="infobox-warning">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div> <div class="infobox-danger">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>