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>
