Dichiarare variabili di tipo colore in Sass senza impazzire

Uno dei migliori motivi per utilizzare Sass è rappresentato dalle variabili. Aiutano a mantenere il vostro codice snello, il che lo rende facile da manutenere e modificare. Tuttavia, per quanto riguarda i colori, è facile perdere il controllo sulle variabili. In questo articolo, vi mostrerò un metodo semplice e rapido per organizzare al meglio le variabili di tipo colore.
Dichiarare variabili di tipo colore in Sass senza impazzire

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Sass Color Variables That Don’t Suck” di Landon Schropp. Uno dei migliori motivi per utilizzare Sass è rappresentato dalle variabili. Aiutano a mantenere il vostro codice snello, il che lo rende facile da manutenere e modificare. Tuttavia, per quanto riguarda i colori, è facile perdere il controllo sulle variabili. In questo articolo, vi mostrerò un metodo semplice e rapido per organizzare al meglio le variabili di tipo colore.

Il problema

Mettiamo il caso che hai il seguente codice CSS:

h1 {
    background-color: #b0eb00; 
}

a {
    color: #b0eb00;
}

button {
    border-color: #b0eb00;
    box-shadow: 0 0 1rem #b0eb00;
}

Se decidi di voler usare un altro colore al posto di #b0eb00, devi sostituirlo in svariati posti e questo può diventare molto oneroso per progetti molto grandi. Con Sass però puoi usare una variabile!

$yellow-green: #b0eb00;

h1 {
    background-color: #b0eb00; 
}

a {
    color: #b0eb00;
}

button {
    border-color: #b0eb00;
    box-shadow: 0 0 1rem #b0eb00;
}

Ora diventa facile sostituire il valore di $yellow-green ovunque. E’ anche semplice capire dove la variabile in oggetto viene usata, semplicemente cercandola. Più passa il tempo più la lista di variabili potrebbe crescere.

$yellow-green: #b0eb00;
$gray: #595959;
$dark-gray: #363636;
$light-gray: #a6a6a6;

Tutto questo però potrebbe portarti inesorabilmente in un gran casino di nomi e valori:

$yellow-green: #b0eb00;
$red: #b30015;
$blue: #2a00b3;
$other-blue: #0077b3;
$cyan: #00b0b3;
$transparent-cyan: #24fbff;
$periwinkle: #8a7dff;
$light-gray: #a6a6a6;
$gray: #595959;
$darkish-gray: #444;
$dark-gray: #363636;
$darker-gray: #303030;
$darkest-gray: #292929;
$darkester-gray: #111;

Ogni volta che aggiungi un nuovo colore, risulta difficile attribuirgli un nome consono. #0c0c0c dovrebbe essere $darkesterest-gray? che ne dici di un $almost-black? Quando usi queste variabili è molto difficile ricordare i nomi senza ricontrollare il codice.

Una soluzione che non funziona

Alla fine hai deciso di eseguire un refactoring delle variabili. Invece di nominare le variabili come i colori, le stai nominando in base al modo in cui vengono usate.

$background-color: #b0eb00;
$error-color: #b30015;
$anchor-color: #2a00b3;
$anchor-hover-color: #0077b3;
$anchor-visited-color: #00b0b3;
$anchor-visited-blending-color: #24fbff;
$tooltip-color: #8a7dff;
$emphasis-color: #a6a6a6;
$text-color: #595959;
$strong-color: #444;
$username-color: #363636;
$shadow-color: #303030;
$border-color: #292929;
$marquee-color: #111;

Il problema è che le variabili non sono riusabili. Cosa accadrebbe se decidessi di usare #292929 come background color per i tuoi bottoni? Dovresti rinominare $border-color in $border-and-button-color oppure aggiungere un’altra variabile e duplicarne il valore. Diciamo che vuoi modificare il colore delle ancore. Invece che cambiare lo stile in questione, dove utilizzato, devi cercare $anchor-color nel grande elenco di variabili di colore.

Un’altra soluzione che non funziona

Hai rinunciato a dare nomi alle variabili preferendo suffissi numerici:

$color1: #b0eb00;
$color2: #b30015;
$color3: #2a00b3;
$color4: #0077b3;
$color5: #00b0b3;
$color6: #24fbff;
$color7: #8a7dff;
$color8: #a6a6a6;
$color9: #595959;
$color10: #444;
$color11: #363636;
$color12: #303030;
$color13: #292929;
$color14: #111;

Ora le tue variabili sono uniche, ma sono difficili da ricordare. Se incontri nel codice $color4, riesci a ricordarti di che colore si tratta? Cosa succede quando vuoi rimuovere un colore? Ti metti a riordinare la sequenza di numeri o lascio tutto così com’è?

Un approccio diverso

Non sarebbe bello se si potesse nominare le variabili senza tutte queste difficoltà? È possibile utilizzare Name That Color! Con questo strumento, puoi rinominare facilmente le variabili di colore.

$lime: #b0eb00;
$bright-red: #b30015;
$dark-blue: #2a00b3;
$deep-cerulean: #0077b3;
$bondi-blue: #00b0b3;
$cyan: #24fbff;
$heliotrope: #8a7dff;
$silver-chalice: #a6a6a6;
$scorpion: #595959;
$tundora: #444;
$mine-shaft: #363636;
$cod-gray: #111;

Adesso le tue variabili sono identificate da colori ma in modo unico e facile da ricordare. La funzionalità che preferisco di questo servizio è che mostra il colore che più si avvicina al tuo quando il codice esadecimale non corrisponde esattamente. Questo tool mette a disposizione più di 1500 nomi di colori, così risulterà semplice trovare un un nome per tutte le tue variabili.

Cosa succede quando un colore è molto simile ad un altro? Per esempio, #303030 e #292929 potrebbero essere nominati entrambi $mine-shaft. Se il nome del colore viene duplicato, non vale la pena di creare una nuova variabile. Nell’esempio appena citato, potresti usare darken($mine-shaft, 2.5%) al posto di #303030;

That’s It!

Hai imparato l’arte di come nominare facilmente le variabili di tipo colore. La tua vita adesso può andare avanti. Divertiti!

  • laboratorioCSS

    ..

  • Tinny

    Bel servizio. Sarebbe perfetto se potessi dargl in pasto il mio less/scss

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github