Comprensione delle variabili CSS (e come usarle)
Pubblicato: 2025-07-13Le variabili CSS sono come ingredienti di design riutilizzabili. Li definisci una volta, poiché i colori del tuo marchio, le dimensioni dei caratteri o la spaziatura, quindi li usi dove necessario. Ti salvano dalla digitazione degli stessi codici esagonali e valori dei pixel in sezioni diverse.
Il loro più grande vantaggio è quanto siano facili da aggiornare. Se si aggiorna una variabile una volta, ogni luogo utilizzato rifletterà anche le modifiche. Quindi, non solo eviti di ripetere manualmente gli stessi valori in più sezioni, ma puoi anche modificare l'intero aspetto del sito Web modificando solo un valore.
Ecco dove migliora ancora: con Divi 5, non è necessario scrivere alcun codice per utilizzare le variabili CSS. Le variabili di progettazione di Divi ti consentono di usarle in un flusso di lavoro visivo e senza codice. Curioso come funziona? Continua a leggere.
- 1 Quali sono le variabili CSS?
- 1.1 Come funzionano le variabili CSS
- 1.2 Comprensione della cascata delle variabili CSS
- 1.3 Aggiunta di un valore di fallback
- 2 Un modo senza codice per utilizzare le variabili CSS in Divi 5
- 2.1 Definire le variabili CSS in Divi 5
- 3 Come Divi 5 rende i flussi di lavoro variabili CSS senza sforzo
- 3.1 1. Crea il tuo framework di progettazione
- 3.2 2. Usa predefinire del gruppo di opzioni per uno stile flessibile
- 3.3 3. Dichiarare variabili CSS personalizzate per un maggiore controllo
- 4 Divi offre un approccio integrato per le variabili CSS
Quali sono le variabili CSS?
Pensa alle variabili CSS come etichette personalizzate che crei per le tue abitudini di design. Qual è il raggio del bordo dell'immagine preferita? Quanto spaziatura di solito lasci tra le sezioni? Hai un colore del pulsante firma che usi ovunque? Puoi trasformare tutti quegli stili unici in variabili CSS.
Questi non sono valori che il browser conosce per impostazione predefinita. Tutto è personalizzato. Decidi il nome, assegna il tuo valore preferito e lo usi dove vuoi. È come creare la tua stenografia che rende lo styling più veloce, più pulito e molto più facile da aggiornare in seguito.
Facciamo un esempio. Supponiamo che tu voglia che il colore primario del tuo sito sia #007BFF. Lo dichiareresti così:
:root {
--primary-color: #007bff;
}
Qui, "–primary-color" è il tuo nome variabile e "#007bff" è il suo valore. Hai appena memorizzato un colore all'interno di un'etichetta personalizzata che il browser ora può riconoscere.
Per usarlo, non riscrivi il codice esadecimale. Si chiama la variabile all'interno della funzione var () in questo modo:
button {
background-color: var(--primary-color);
}Quella riga di codice garantisce che il tuo pulsante estrae sempre il valore da –Primary-color.
Ora, puoi usarlo dove necessario e quando è il momento di aggiornare il colore del tuo marchio, non è necessario scavare dozzine di file. Basta cambiare la variabile una volta e ogni elemento in cui viene utilizzato viene aggiornato automaticamente. Ad esempio, i pulsanti, le intestazioni e i bordi tutti usano--colore. Una singola modifica li aggiorna tutti.
Ecco come le variabili CSS semplificano gli aggiornamenti a livello del sito.
Come funzionano le variabili CSS
Per dichiarare una variabile CSS, la sintassi di base assomiglia a questa:
.root {
--name: value;
} Alcune cose da notare. Innanzitutto, una variabile CSS inizia sempre con due trattini ( -). È così che il browser sa che è personalizzato, qualcosa che hai definito per il tuo sistema di progettazione.
Le proprietà CSS integrate come dimensioni del carattere, colore o imbottitura hanno già un significato. Il browser sa esattamente cosa farne. Ma le proprietà personalizzate sono etichette vuote fino a quando non si assegnano un valore. Stai creando le tue regole di progettazione in un progetto di siti Web, come —Primary-Color e dicendo al browser cosa rappresenta.
Dove definisci anche le tue variabili CSS fa una grande differenza.
Quando lo posiziona all'interno del: root selector (come abbiamo fatto sopra), diventa globale. Ciò significa che è possibile utilizzare la variabile su qualsiasi pagina e elemento. Questo perché: Root prende di mira l'elemento di alto livello del tuo HTML, di solito il tag <html>.
Ma se si definisce la stessa variabile all'interno di una classe o selettore specifica, funziona solo in quel punto. Come questo:
.card {
--bg-color: #f4f4f4;
} Qui, –Bg-color si applica solo all'interno del selettore .Card. Prova a usarlo altrove e non verrà visualizzato. Ad esempio, di seguito vedrai due carte.
La scheda 1 utilizza una variabile definita localmente –Card-BG dichiarata all'interno del contenitore .Card. Quella variabile funziona solo all'interno di quel contenitore. Non si applica nella carta 3.
La carta 2, d'altra parte, estrae il suo sfondo da –Global-color, che è definito in: radice. Ecco perché anche Card 4 raccoglie dello stesso colore. Ha accesso alla variabile globale.
Come best practice, se vuoi coerenza in tutto il tuo sito, definisci sempre i valori CSS in: root. E se definissi una variabile a livello locale e ne hai dimenticato, ma ora non funziona come previsto? Risolverai questo problema impostando un valore di fallback. Ne parleremo da un po '.
Comprensione della cascata delle variabili CSS
Potresti avere familiarità con il termine "cascata". Bene, anche le variabili CSS cascate, ma cosa significa questo?
Se una variabile viene definita sia a livello globale (in: root) che localmente (all'interno di una classe o contenitore), il browser userà sempre quello più vicino all'elemento. Ecco come funziona a cascata in CSS. Regole più strette hanno la priorità.
Ed è esattamente così che funziona la modalità oscura.
Ad esempio, potresti definire –Text-color: Black In: Root. Ma all'interno di un contenitore in modalità .Dark, puoi ridefinirlo come bianco. Quindi, quando l'utente attiva l'opzione Modalità Dark, il browser utilizzerà la versione locale all'interno della modalità .Dark, anche se il nome della variabile rimane lo stesso.
Questo ti consente di mantenere coerente la denominazione mentre si regola gli stili in base al contesto. È un modo in cui le variabili CSS vanno oltre la semplice riusabilità. Si adattano in base a dove e come vengono utilizzati.
Aggiunta di un valore di fallback
A volte, potresti fare riferimento a una variabile CSS che non è disponibile. Forse è stato definito solo all'interno di una sezione specifica o è stato rimosso per errore. Quando ciò accade, il browser non sa cosa fare. Gli stili che dipendono da quella variabile semplicemente non saranno applicati.
È possibile aggiungere un valore di fallback direttamente all'interno della funzione var () per evitarlo. Serve come backup nel caso in cui manca la variabile originale. Ecco come funziona:
h1 {
color: var(--heading-color, #000); /* #000 - This is the fallback value. */
} Questo dice al browser di usare il colore della testata se esiste. In caso contrario, usa invece il nero (#000).
I fallback sono particolarmente utili quando si creano componenti riutilizzabili o si lavora in più sezioni in cui le variabili potrebbero non essere sempre disponibili. Mantengono il tuo design stabile e coerente.
Puoi persino incazzare falliti come il colore: var (–accent-color, var (–primary-color, #333));
Qui, il browser controlla prima –Accent-color. Se manca, prova a colori primari. Se manca anche questo, è predefinito a #333. Questo dà ai tuoi stili una rete di sicurezza in modo che continuino a rendere correttamente anche se mancano alcuni valori.
Un modo senza codice per utilizzare le variabili CSS in Divi 5
Tutto ciò che hai visto sulle variabili CSS (il controllo globale, i valori riutilizzabili, la logica a cascata) suona alla grande, ma viene anche fornito con una presa: devi scrivere e gestire il codice. Per molti designer, non è l'ideale. E se preferissi il design visivo? Ciò significa che non puoi usare le variabili CSS, giusto? Sbagliato.
Divi 5 ti dà un modo più veloce e più visivo di lavorare con la stessa logica delle variabili CSS. Introduce variabili di progettazione, un'alternativa senza codice alle variabili CSS costruite direttamente nel Builder Divi.
Iscriviti al nostro canale YouTube
Le variabili di progettazione ( come le variabili CSS) sono valori riutilizzabili che definisci una volta e utilizzano attraverso il tuo sito . Ciò che è diverso è come lo fai. Non li definisci nel foglio di stile del tuo sito Web ma nel gestore variabile all'interno di Divi Builder, visivamente.
Come le variabili CSS, dai un nome a una variabile di design e assegni un valore. Una volta salvato, diventa disponibile in qualsiasi modulo che supporta quella proprietà.
Anche l'applicazione della variabile salvata è facile. Basta individuare l'icona del gestore delle variabili molindoti sull'opzione Impostazioni del modulo, facendo clic su di essa per popolare tutte le variabili salvate e scegliendo quella che si desidera applicare.
La parte migliore delle variabili di progettazione è che non solo i valori di progettazione, ma puoi anche salvare valori di contenuto ripetibili come immagini, collegamenti e stringhe di testo. In questo modo, gestisci i contenuti ripetuti efficacemente riutilizzando elementi di contenuti comuni in tutto il tuo sito Web senza lavoro manuale.
Impara tutto sulle variabili di design di Divi 5
Definisci le variabili CSS in Divi 5
Questa variabile di progettazione media sostituisce le variabili CSS? Non esattamente.
Le variabili di design sono ottime per conservare i valori che usi spesso, come i colori del marchio, ma non tutti gli stile devono essere globali. Non vorrai sempre salvare ogni piccola modifica come variabile di design, specialmente quando è unico per una singola pagina.
Diciamo che stai creando una pagina di destinazione con una sezione di eroi personalizzati. L'altezza differisce da qualsiasi altra cosa sul sito e è improbabile che tu lo riutilizzi. Salvarlo come variabile di design non è il miglior uso della tua libreria globale. In questo caso, definire una variabile CSS direttamente nelle impostazioni della pagina è una scelta più pulita.
Lo stesso vale per layout complessi o unici. Forse hai bisogno di un colore di evidenziazione personalizzato o di un valore di spaziatura specifico del layout che è rilevante solo in quel contesto. Invece di affollarsi il tuo sistema con variabili che non riutilirai mai, puoi definire le variabili CSS proprio dove ne hai bisogno.
Non vogliamo che tu sostituisca le variabili CSS con le variabili di design. Vogliamo che tu usi il meglio di entrambi.
Ecco perché Divi 5 semplifica la definizione delle variabili CSS. Puoi facilmente dichiarare le tue variabili CSS all'interno delle impostazioni della pagina> Avanzate> CSS personalizzato , proprio come faresti con i normali CSS.
Ma semplifichiamo la loro applicazione per te. Una volta definito, è possibile utilizzare queste variabili su quella pagina. Vai a qualsiasi modulo, scegli CSS VAR dal menu a discesa delle unità avanzate e inserisci il nome della variabile all'interno della funzione var ().
Questo approccio ti dà flessibilità quando necessario, senza costringerti a impegnare tutto nel sistema variabile di design visivo. È un equilibrio tra struttura e libertà creativa.
Usando le variabili CSS in Divi 5
Come Divi 5 rende i flussi di lavoro variabili CSS senza sforzo
Ora che sai quali sono le variabili CSS e come Divi 5 le supporta visivamente, ecco perché questo è davvero importante. Non è solo perché Divi ti dà due modi per utilizzare le variabili CSS. È perché li rende integrati senza intoppi con il tuo flusso di lavoro.
È possibile utilizzare facilmente le variabili CSS con potenti funzionalità come variabili di design, preset di gruppi di opzioni e unità avanzate. Ottieni ancora tutta la flessibilità e la scalabilità dei CS tradizionali, ma senza scrivere una singola riga di codice a meno che tu non scelga.
Cammiamo attraverso come Divi 5 dà vita a questo flusso di lavoro.
1. Crea il tuo framework di progettazione
Le variabili di design sono davvero potenti perché puoi costruire visivamente l'intero framework di design, quindi lo styling di una pagina richiede solo pochi clic. Ti consigliamo di iniziare con i tuoi elementi di design di base, come le dimensioni dei caratteri, le unità di spaziatura e i colori del marchio, quindi li hai tutti in un unico posto.
Quindi, puoi anche salvare contenuti usati frequentemente come stringhe di testo, URL e immagini. Ad esempio, un motivo di fondo comune che si ripete in diverse sezioni, link di social media, e -mail, indirizzo, ecc.
Una volta che hai il tuo framework in atto, tutto diventa più facile. Non è necessario tornare a un foglio di stile root per trovare una variabile o ricordare nomi esatti. Divi li organizza per te: colori nella scheda Colore , caratteri nella scheda Font e tutti accessibili all'interno del gestore variabile .
E quando il tuo sito necessita di un aggiornamento del design, non perderai tempo a modificare il modulo per modulo o caccia attraverso un lungo foglio di stile. Aggiornerai il tuo valore salvato nella variabile manager una volta e le modifiche si applicano immediatamente in ogni istanza.
Lo stesso controllo a livello CSS, ma senza la necessità di memorizzare, scrivere o eseguire il debug di nulla.
2. Usa i preimpostazioni del gruppo di opzioni per lo stile flessibile
I preset del gruppo di opzioni ti danno un controllo più dettagliato sul sistema di progettazione. Invece di applicare un singolo set di stili sul tuo sito, è possibile creare più gruppi di scelte di progettazione per diversi casi d'uso, tutti costruiti dalle stesse variabili di progettazione di base.
Qui, stai stratificando stili. Definisci i tuoi valori fondamentali una volta nel gestore variabile, quindi crea diversi preset che tirano da quei valori ma li applicano in modi leggermente diversi. Se hai mai aggiornato un valore variabile salvato, la modifica riflette istantaneamente su tutti i tuoi preset e i moduli in cui vengono applicati.
Questo sistema di progettazione basato su preset ti aiuta a creare combinazioni di stile illimitate. Ad esempio, potresti avere uno stile di testa per l'eroe della homepage e un altro per i titoli di blog, entrambi utilizzando la stessa variabile di dimensioni del carattere ma con spaziatura, pesi o trasformazioni di testo diverse.
La struttura rimane pulita. Lo stile rimane coerente. E quando necessario, è possibile sovrascrivere qualsiasi preimpostazione a livello di modulo. Quindi ottieni il controllo a livello di sistema senza perdere la libertà creativa.
3. Dichiarare le variabili CSS personalizzate per un maggiore controllo
Come sapete, Divi non ti blocca dal controllo avanzato. Se vuoi definire le tue variabili CSS, puoi assolutamente farlo tramite impostazioni di pagina> Avanzate> CSS personalizzato. Ma non è la parte divertente.
La cosa divertente è che ti consente di utilizzare potenti funzioni CSS come CLAMP () e Cal () (grazie alle unità avanzate) per creare visivamente layout fluidi e reattive. Puoi anche utilizzare le variabili CSS salvate come valori per le variabili di progettazione.
Questo ti aiuta a creare un sistema di progettazione più interconnesso. La logica CSS e lo stile visivo non esistono più in silos separati. È possibile definire un valore una volta in CSS e tirarti visivamente dove necessario. Mantiene il flusso di lavoro fluido, scalabile e facile da mantenere.
Potresti trovare questo tutto travolgente, ma una volta che hai capito come funziona insieme, non si può tornare indietro. Cambia il modo in cui progetti, pensi e costruisci. Ciò che inizia come un sistema di variabili diventa rapidamente il tuo linguaggio di design. E sì, questi strumenti sono potenti, ma sono pensati per essere modellati attorno al tuo processo. Prenditi il tuo tempo, esplora ciò che si adatta al tuo stile e costruisci un flusso di lavoro che funziona per te.
Divi offre un approccio integrato per le variabili CSS
La progettazione di variabili CSS è utilizzata per scegliere tra flessibilità e complessità. Divi 5 cancella questo e porta la piena potenza di variabili, controllo visivo, aggiornamenti a livello di sito e logica a strati in un flusso di lavoro intuitivo e scalabile.
Non è necessario scegliere tra CSS personalizzato e design a code. Puoi mescolare, abbinare ed evolvere il tuo sistema man mano che i tuoi progetti crescono. E una volta che vedi quanto può essere liscio e potente, è difficile immaginare di costruire in qualsiasi altro modo. Ma per questo, devi prendere il controllo nelle tue mani.
Prova Divi 5 per te stesso e costruisci un sistema di progettazione che funzioni con te, non contro di te.