Funzione SASS per modificare dinamicamente il colore del testo partendo dal colore di sfondo

(articolo: http://thesassway.com/intermediate/dynamically-change-text-color-based-o... )

I designer scelgono il colore del testo di un elemento in base al colore di sfondo. Se lo sfondo è scuro, si sceglie un testo chiaro e viceversa, per rendere il testo più facile da leggere.

Quindi, come possiamo utilizzare Sass per scegliere il colore del testo appropriato per un fondo?

Usiamo i messaggi di notifica come esempio:

<p class="notification notification-confirm">Confirmation</p>
<p class="notification notification-warning">Warning</p>
<p class="notification notification-alert">Alert</p>

Naturalmente dovremmo avere sfondi di colore diverso. Ad esempio Verde per la conferma, giallo per gli avvertimenti e rosso per allarme, e vorremmo il giusto  contrasto per il testo.

Creiamo una funzione Sass per renderci la vita un po 'più facile:

@function set-notification-text-color($color) {
  @if (lightness($color) > 50) {
    @return #000000; // Lighter backgorund, return dark color
  } @else {
    @return #ffffff; // Darker background, return light color
  }
}

Qui abbiamo usato la funzione Sass lightness() per determinare quale colore è più appropriato per uno sfondo.

Il lightness() è una funzione built-in Sass che restituisce la luminosità del valore di un colore RGB tra 0 e 100,  dove 0 è il più scuro e 100 il più luminoso.

Così nel nostro funzione riceviamo un colore, e se il valore di luminosità  del colore è superiore a 50, significa che è un colore chiaro, usiamo un colore scuro  per il testo per assicurare un buon contrasto. Altrimenti usiamo un colore chiaro.

$notification-confirm: hsla(101, 72%, 37%, 1);  // Green
$notification-warning: #ffc53a;                 // Yellow
$notification-alert: rgb(172, 34, 34);          // Red

%notification {
  border-radius: 10px;
  display: block;
  font-size: 1.5em;
  font-family: sans-serif;
  padding: 1em 2em;
  margin: 1em auto;
  width: 30%;
  text-align: center;
}

.notification {
  @extend %notification;
}
.notification-confirm {
  background: $notification-confirm;
  color: set-notification-text-color($notification-confirm);
}
.notification-warning {
  background: $notification-warning;
  color: set-notification-text-color($notification-warning);
}
.notification-alert {
  background: $notification-alert;
  color: set-notification-text-color($notification-alert);
}