Le funzioni lighten() e darken() in SASS

Un modo semplice per regolare i colori

Come utilizzare lighten() e darken() in SASS

Sfrutta al massimo le funzioni lighten() e darken() per creare transizioni di colore fluide

Introduzione

SASS (Syntactically Awesome Style Sheets) è un preprocessore CSS che offre numerosi strumenti per semplificare e migliorare la scrittura dei fogli di stile. Tra le molte funzioni utili offerte da SASS, le funzioni lighten() e darken() permettono di regolare i colori in modo semplice ed efficiente. In questo articolo, esplorerai in dettaglio queste due funzioni e capirai come possono essere utilizzate per creare effetti visivi accattivanti nei tuoi progetti.

Le funzioni lighten() e darken()

lighten() e darken() sono due funzioni per la gestione del colore fornite da SASS che consentono di regolare la luminosità di un colore specificato. Entrambe le funzioni accettano due argomenti: il colore di partenza e la percentuale di luminosità da applicare.

La funzione lighten() aumenta la luminosità del colore di partenza, mentre la funzione darken() la diminuisce. La percentuale di luminosità può variare da 0% (nessuna variazione) a 100% (massima variazione). Ad esempio, per aumentare la luminosità di un colore del 20%basta scrivere:

    
lighten($color, 20%)

mentre per diminuire la luminosità di un colore del 10%:

    
darken($color, 10%)

Utilizzo delle funzioni lighten() e darken()

Le funzioni lighten() e darken() possono essere utilizzate in molti contesti, come ad esempio la definizione dei colori degli elementi di una pagina web o la creazione di effetti di hover su pulsanti o link.

Un esempio comune di utilizzo di queste funzioni è la creazione di gradienti di colore. Si inizia definendo un colore di base e poi utilizzando lighten() e darken() per generare automaticamente sfumature più chiare e più scure dello stesso. Ciò consente di ottenere una transizione fluida tra i diversi gradienti e rende il code design più armonioso.

Ecco un esempio di codice per la generazione del gradiente su un bottone:

    
$base-color: #FF0000;

.button {
  background-color: $base-color;

  &:hover {
    background-color: lighten($base-color, 10%);
  }

  &:active {
    background-color: darken($base-color, 10%);
  }
}

Nell'esempio sopra, il colore di base del pulsante è il rosso (#FF0000). Quando l'utente muove il cursore sopra il pulsante, la luminosità del colore viene aumentata del 10% utilizzando lighten(), creando un effetto di "evidenziazione". Allo stesso modo, quando il pulsante viene premuto, la luminosità del colore viene diminuita del 10% utilizzando darken(), creando un effetto di "ombreggiatura". In questo modo invece di definire tre colori diversi, basta definirne uno e usare le due funzioni per modificarne la luminosità. In caso di modifica del colore di base, non sarà necessario ricordarsi di cambiare anche i colori secondari perché in automatico i gradienti verranno ricalcolati dalle funzioni.

Conclusione

Le funzioni lighten() e darken() di SASS offrono un modo semplice e potente per regolare la luminosità dei colori nei fogli di stile. Consentono di creare facilmente gradienti di colore, spesso molto utilizzati per creare effetti di highlight e shadow, riducendo la ripetizione del codice, migliorandone la manutenibilità e la leggibilità.

Se ti è piaciuto questo articolo e vorresti leggerne altri quando disponibili, considera di aggiungere il Feed RSS in un aggregatore di notizie come Feedly oppure salva questo sito tra i preferiti e torna quando vuoi 👋

Author: Fantantonio

Date: 29/05/2023

Categories: devtips

Tags: sass scss css stylesheet web design colori darken lighten