Come aggiungere variabili CSS per personalizzare i temi figlio di WordPress

Le variabili CSS, denominate anche proprietà personalizzate CSS, consentono un facile riutilizzo nei fogli di stile CSS. Se hai lavorato con i temi figlio di WordPress, probabilmente ti ritroverai a fare un sacco di stili e sovrascrivere cose come colore, padding, ecc. Se sei nuovo nel web design, vale la pena ricordare che non c'è niente di sbagliato nell'usare semplici CSS. Le variabili CSS sono facoltative e man mano che diventi più avanzato, inizierai a vedere in che modo le variabili ti gioveranno.

Questi non intendono sostituire i preprocessori CSS, il più popolare è SASS. Uso specificamente SASS per progetti più grandi e, insieme alle variabili CSS come pezzo fondamentale, offre qualsiasi opzione avanzata. Se hai già lavorato con i preprocessori, tuttavia, sai che devono essere compilati per produrre il CSS. Per questo motivo, questo tutorial si concentrerà sulle variabili CSS e non entrerà nei dettagli sui preprocessori.

Le variabili CSS sono un mezzo felice. Fortunatamente, c'è un forte supporto per il browser. Prima di impegnarti a utilizzarli in produzione, assicurati di controllare Posso utilizzare per assicurarti che dispongano del supporto di cui hai bisogno. Sono più efficienti che lavorare con CSS semplici ma non richiedono una configurazione avanzata come SASS. Il browser esegue la "compilazione" e non sei dipendente dalla configurazione e dall'ambiente che genera il CSS compilato.

Questo approccio è un buon progetto adatto per cose come lo styling di semplici temi figlio di WordPress. In progetti come questo, tende ad essere necessario apportare aggiornamenti di stile per creare un tema con il marchio. Mi piace il fatto di avere un elenco gestibile di sostituzioni di stile e non sento la necessità di configurare un ambiente che compili SASS in CSS.

Ottieni gratuitamente i temi Genesis Framework e StudioPress!

Quando ospiti i tuoi siti su Flywheel, avrai accesso a oltre 30 temi WordPress premium (incluso Genesis!) direttamente dalla nostra deliziosa dashboard. Si tratta di un valore di oltre $ 2.000 con cui puoi iniziare con soli $ 15 al mese! Scopri di più qui.

Come utilizzare le variabili CSS

Quando si utilizzano colori specifici per mantenere il marchio, un requisito comune è avere una tavolozza di colori del marchio che possa essere utilizzata più e più volte. Diventa ridondante digitare ogni volta lo stesso valore di colore. Inoltre, cosa succede se si desidera apportare una modifica a uno dei valori di colore nel set? Ad esempio, forse un blu deve essere leggermente più scuro. Questo succede tutto il tempo. Sì, certo, c'è il fidato trova e sostituisci. La regolazione del valore in un punto, tuttavia, è più efficiente quando si effettua questa modifica globale e poiché le variabili vengono riutilizzate.

Ecco come appare una variabile CSS :

:root {
--text-black: #232525;
}

header {
color: var(--text-black);
}

Mentre sto semplificando il flusso di lavoro per lo stile di un tema figlio di WordPress, ho aggiunto le variabili al mio file styles.css . Questa è solo la "lista breve" e man mano che ne vengono aggiunti altri, la denominazione efficiente di ciascuna variabile diventa importante.

:root {
--white: #ffffff;
--black: #232525;
--mid-gray: #eeeeee;
--brand-red: #e50000;
}

La funzione var()

Come vengono effettivamente utilizzate le variabili? È abbastanza semplice. Innanzitutto, la variabile viene dichiarata e quindi utilizzata nel set di regole CSS necessario. La portata è una cosa importante di cui essere consapevoli. Le variabili devono essere dichiarate all'interno di un selettore CSS che rientri nell'ambito previsto. In molti casi, avrai bisogno che le variabili siano disponibili nell'ambito globale, in questo modo sono accessibili a tutto. È possibile utilizzare il selettore :root o body per l'ambito globale. Tuttavia, potrebbero esserci casi in cui è necessario limitare l'ambito e si desidera lavorare con una variabile con ambito locale.

È facile individuare le variabili; hanno due trattini prima di loro. I due trattini (–) devono essere inclusi.

La sintassi di var() è piuttosto semplice:
var(variable-name, value)

:root {
--light-gray: #eeeeee
--text-black: #434344
}

.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}

Invece di regolare il colore in più punti, il valore della variabile viene regolato in un unico punto.

L'ispettore web (in questo caso Chrome) ti consente di ispezionare e vedere quali variabili vengono utilizzate.

L'esempio seguente definisce innanzitutto le proprietà personalizzate globali denominate --light-gray e --text-black . Viene chiamata la funzione var() , che inserisce il valore delle proprietà personalizzate più avanti nel foglio di stile:

:root {
--light-gray: #eeeeee;
--text-black: #434344;
}

.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}

Vale la pena ricordare che le variabili possono essere molto utili quando si lavora con i punti di interruzione CSS. Utilizzando variabili con ambito globale in diversi punti di interruzione, elementi come il riempimento e altri stili utili possono essere personalizzati per varie dimensioni.

:root {
--gutter: 5px;
}

section {
padding: var(--gutter);
}

@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}

Ecco un esempio di variabili che possono essere trovate nell'ambito locale. Finora abbiamo solo toccato l'ambito globale, quindi noterai che le cose non sono nella radice. Questi sono stili per un messaggio di avviso. C'è un colore del testo di avviso dichiarato qui che è utile solo per questa classe. Inoltre, vale la pena notare che è possibile utilizzare anche calc .

.warning {
--warning-text: #ff0000;
--gap: 20;
color: var(--warning-text);
margin-top: calc(var(--gap) * 1px);
}

Gli esempi precedenti coprono le basi delle variabili CSS. Questi concetti possono essere applicati a temi WordPress personalizzati o a qualsiasi altro CSS personalizzato che scrivi. Le variabili presentano vantaggi rispetto al semplice CSS e ti aiuteranno a lavorare in modo più efficiente quando apporti modifiche a livello di sito. Consentono fogli di stile meglio organizzati senza la necessità di un preprocessore.

Cosa c'è dopo: Plugin

Scarica questo ebook per un elenco dei nostri plugin più consigliati per gli sviluppatori! Abbiamo riscontrato che tutti questi plugin sono semplici da usare, non troppo performanti sul tuo sito e semplicemente affidabili.

Ti piace questo articolo? Prova uno di questi:

• Come creare un layout di carte utilizzando CSS Grid Layout
• Come combinare Flexbox e griglie CSS per layout efficienti
• Semplici personalizzazioni per il tuo tema figlio Genesis