Le variabili CSS, note anche come proprietà personalizzate, ti aiutano a ridurre al minimo la ripetizione nei tuoi fogli di stile. Questo, a sua volta, ti aiuta a risparmiare tempo e fatica quando apporti modifiche al tuo progetto. Puoi anche stare certo che non perderai nessun valore che devi aggiornare.
L'accesso al DOM consente di creare variabili, memorizzarle e riutilizzarle in tutto il foglio di stile.
Come definire e utilizzare le variabili CSS
Per rendere i tuoi fogli di stile più organizzati, gestibili e riutilizzabili, puoi utilizzare le variabili CSS in qualsiasi proprietà che accetti un valore.
Prendi il seguente esempio di un file HTML e di un file CSS che non utilizza variabili CSS.
codice HTML:
html>
<htmllang="it">
<Testa>
<titolo>Variabili CSS - Variazioni dei pulsantititolo>
<collegamentorel="foglio di stile"href="Variabili.css" />
Testa>
<corpo>
<div>
<h1>Variabili CSSh1>
<div>
CSS:
.btn {
imbottitura: 1rem 1.5rim;
sfondo: trasparente;
font-weight: 700;
colore rosso;
}
Ecco come dovrebbe apparire la tua pagina:
IL .btn La classe utilizzata nel foglio di stile sopra non è dinamica e ti costringe a creare una classe separata per personalizzare i singoli pulsanti. La creazione di bellissimi siti Web richiede che tu sia dinamico con il tuo stile front-end. L'implementazione dei pulsanti in questo modo renderà semplicemente quel compito un problema da raggiungere.
Come la maggior parte dei linguaggi di programmazione, devi inizializzare e sostituire le variabili CSS.
Per inizializzare una variabile CSS, anteporre al nome della variabile doppi trattini:
:radice{
/*variabile CSS*/
--nome_variabile: valore;
}
Puoi inizializzare una variabile ovunque, ma tieni presente che sarai in grado di utilizzare solo quella variabile all'interno del selettore inizializzato. Per questo motivo, le variabili CSS vengono convenzionalmente inizializzate all'interno del root selector. Questo mira all'elemento di livello più alto del DOM e consente alle variabili di essere accessibili dall'intero documento HTML su scala globale.
Per sostituire la variabile nel tuo stile CSS, utilizzerai il file var() proprietà:
:radice {
/*variabile CSS*/
--primario: #900c3f;
--secondario: #ff5733;
}.btn {
imbottitura: 1rem 1.5rim;
sfondo: trasparente;
font-weight: 700;
colore: var(--primario);
colore di sfondo: var(--secondario);
}
.sub-primario {
colore: var(--secondario);
colore di sfondo: var(--primario);
}
Il root selector contiene due variabili: --primario E --secondario. Entrambe le variabili vengono quindi sostituite in .btn class rispettivamente come colore e colore di sfondo.
Usando le variabili, puoi modellare i singoli elementi molto più facilmente. Riutilizzando le variabili, puoi modificare rapidamente un valore una volta per aggiornarlo in ogni istanza.
IL var() proprietà può anche accettare un secondo argomento. Questo argomento funge da valore di fallback per il primo argomento in una situazione in cui il primo non è definito o non è valido.
Per esempio:
:radice {
--primario: #900c3f;
--secondario: #ff5733;
}
.btn {
imbottitura: 1rem 1.5rim;
sfondo: trasparente;
font-weight: 700;
colore: var(--primario, blu);
}
In questo esempio, sostituire il --primario variabile in colore stile. Se per qualsiasi motivo questo valore fallisce, il foglio di stile utilizzerà il secondo valore come fallback. Puoi anche utilizzare un'altra variabile CSS come valore di fallback.
Manipolazione e sostituzione delle variabili CSS con JavaScript
Manipolare le variabili CSS utilizzando JavaScript può essere un modo efficace per cambiare al volo l'aspetto del tuo sito web. Utilizzando JavaScript, puoi aggiornare i valori di queste variabili e vedere i cambiamenti riflessi nel tuo sito.
È importante notare che le modifiche apportate con JavaScript si applicheranno solo alla sessione corrente. Devi aggiornare la fonte originale o memorizzare il nuovo valore sul client, come in un cookie, per mantenere le modifiche.
Ecco un esempio di come utilizzare JavaScript per aggiornare il valore di una variabile CSS.
codice HTML:
html>
<htmllang="it">
<Testa>
<titolo>Variabili CSS - Variazioni dei pulsantititolo>
<collegamentorel="foglio di stile"href="Variabili.css" />
<copione>
funzionecambia colore() {
// Ottieni l'elemento su cui vuoi cambiare la variabile
cost mioElemento = documento.querySelector(":radice");// Ottieni il valore corrente della variabile
permettere currentValue = getComputedStyle (myElement).getPropertyValue(
"--secondario"
);
// Impostato IL nuovovaloreper IL variabile
myElement.stile.setProperty("--secondario", "#DAF7A6");
}
copione>
Testa>
<corpo>
<div>
<h1>Variabili CSSh1>
<div>
CSS:
:radice {
--primario: #900c3f;
--secondario: #ff5733;
}.btn {
imbottitura: 1rem 1.5rim;
sfondo: trasparente;
font-weight: 700;
}
.sub-primario {
colore: var(--primario);
colore di sfondo: var(--secondario);
}
In questo codice JavaScript, il cambia colore() La funzione aggiorna il colore del primo pulsante quando l'utente fa clic su di esso.
Usando Metodi di attraversamento DOM, puoi accedere alle classi o ai selettori applicati nel tuo documento HTML e manipolare i valori.
Prima di fare clic sul pulsante:
Dopo aver cliccato sul pulsante:
Puoi anche utilizzare JavaScript per creare nuove variabili CSS o rimuoverle del tutto.
Per esempio:
// Creare UN nuovovariabile
documento.documentElement.style.setProperty('--nuovo-colore', 'blu');
// Rimuove una variabile
documento.documentElement.style.removeProperty('--nuovo-colore');
Utilizzo di variabili CSS con preprocessori
L'utilizzo di variabili all'interno della tecnologia frontend è stato inizialmente ottenuto con preprocessori CSS come SASS, MENO e Stilo.
Lo scopo dei preprocessori CSS è sviluppare codice che estenda le capacità fondamentali dei CSS standard. Quindi fai in modo che il codice venga compilato in CSS standard affinché il browser lo capisca, proprio come come funziona TypeScript con JavaScript.
Con lo sviluppo delle variabili CSS, i preprocessori non sono più così importanti, ma possono ancora offrire qualche utilità se combinati con le variabili CSS nel tuo progetto.
È possibile definire una variabile SASS $colore-principale e usalo per impostare il valore di una variabile CSS. Quindi, usa la variabile CSS in una normale classe di stile.
Puoi anche utilizzare le funzioni SASS per manipolare i valori delle variabili CSS.
Per esempio:
:radice {
--primary: $colore-principale;
--secondary: schiarisci(var(--primario), 20%);
}
.btn {
colore: var(--primario);
colore di sfondo: var(--secondario);
}
Qui, la funzione SASS alleggerire() manipola il valore di --primario ottenere un valore per --secondario.
Si noti che le variabili SASS non sono accessibili da JavaScript. Quindi, se hai bisogno di manipolare i valori delle tue variabili in fase di esecuzione, dovresti usare le variabili CSS.
Usando insieme variabili CSS e preprocessori, puoi sfruttare entrambi i vantaggi, come l'utilizzo potenti funzionalità di preprocessore come loop e funzioni e funzionalità di variabili CSS come CSS a cascata.
Suggerimenti per l'utilizzo delle variabili CSS nello sviluppo Web
Ecco alcuni suggerimenti importanti da notare che ti aiuteranno a utilizzare meglio le variabili CSS.
Inizia con una convenzione di denominazione chiara
Scegli una convenzione di denominazione per le tue variabili che le renda facili da capire e da usare. Ad esempio, utilizzare un prefisso come --colore- per variabili di colore o --spaziatura- per le variabili di spaziatura.
Utilizza le variabili nelle media query per semplificare l'adattamento del tuo design alle diverse dimensioni dello schermo.
Approfitta della natura a cascata dei CSS
Ricorda che le variabili CSS sono a cascata, il che significa che se imposti una variabile su un elemento genitore, influenzerà tutti i suoi figli.
Usa le variabili CSS con cautela
L'uso di troppe variabili CSS può causare confusione, quindi usale con cautela e solo quando ha senso e migliora la manutenibilità del codice.
Metti alla prova le tue variabili
Le variabili CSS sono un modo unico per scrivere codice chiaro e gestibile all'interno del tuo foglio di stile.
È importante notare che non sono ancora completamente supportati su tutti i browser. Pertanto, dovresti testare le tue variabili per la compatibilità del browser per assicurarti che funzionino come previsto e che tutti i valori di fallback funzionino come previsto.
