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à.
Author: Fantantonio
Date: 29-05-2023
Categories: devtips
Tags: sass scss css stylesheet web design colori darken lighten