(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); }