Share
Le variabili invariabilmente esistono in tutti i linguaggi di programmazione, ed è perché sono piuttosto utili. Devi solo memorizzare un valore in una variabile una volta, e quindi puoi usarlo più volte in un secondo momento, evitando la ripetizione. Mentre il CSS non è un linguaggio di programmazione, la mancanza di variabili limita ancora le sue capacità.
Ora che le variabili CSS native sono in giro, vorrei discutere di come sono diverse dalle variabili fornite dai preprocessori CSS e come usarle correttamente.
La sintassi per l'utilizzo delle proprietà personalizzate è un po 'prolissa e alcuni sviluppatori potrebbero considerarla brutta. Un altro fattore che scoraggia l'uso di variabili native è il supporto esistente fornito dalle variabili di Sass.
Mentre i preprocessori come le variabili di supporto di Sass, hanno ancora alcune limitazioni che discuterò in questa sezione.
Non è possibile aggiornare le variabili del preprocessore in base alle query multimediali. Per rendere un sito reattivo, è necessario modificare i valori in base alle dimensioni dello schermo. Le variabili del preprocessore non possono farlo. Ad esempio, considera il seguente codice:
$ article-margin: 1em 0.5em; @media (larghezza minima: 1024 px) $ article-margin: 2em 1em; .my-article margin: $ article-margin;
Compilerà a:
.my-article margin: 1em 0.5em;
Come puoi vedere, l'assegnazione all'interno della query multimediale è completamente ignorata. D'altra parte, le variabili CSS rispetteranno questo compito all'interno di una query multimediale.
Allo stesso modo, le variabili del preprocessore non si sovrappongono né ereditano. Utilizzando le variabili native, puoi eliminare tutte queste limitazioni. Un altro vantaggio importante dell'utilizzo di variabili native è che sono interoperabili. A differenza delle variabili Sass, che funzionano solo con Sass, le variabili native funzioneranno non solo con tutti i preprocessori ma anche con semplici file CSS.
Per capire come usare le proprietà personalizzate CSS, iniziamo con un esempio di base:
: root --text-color: crimson; .my-section color: var (- text-color, black);
Ogni qualvolta si definisce una proprietà personalizzata, si inizia definendo il suo ambito. L'ambito determina i nodi DOM a cui la proprietà personalizzata potrebbe essere disponibile. utilizzando :radice implica che la proprietà personalizzata è disponibile per tutti gli elementi. Tieni presente che tutte le proprietà personalizzate devono iniziare con due trattini.
Se intendi utilizzare una proprietà personalizzata, dovrai fare riferimento a essa var () funzione. Questa funzione richiede due argomenti; il primo è la proprietà personalizzata stessa e il secondo è un valore di riserva. Il valore di fallback viene utilizzato quando una proprietà personalizzata non è dichiarata su nessuno degli antenati o se il suo valore non è valido.
Si noti che le proprietà personalizzate sono sensibili al maiuscolo / minuscolo. Questo implica che --colore del testo , --Colore del testo, e --colore del testo sono tutti diversi.
Ci sono un paio di altre cose che dovrebbero essere tenute a mente durante l'utilizzo var ().
Il primo è che i valori di fallback possono essere separati da virgole e, nel caso di valori di abbreviazioni come il margine, non è necessario separare i singoli valori con una virgola. Per esempio, var (- para-font-family, "Lato", "Roboto"); imposta il valore di fallback come "Lato" "Roboto";. Allo stesso modo, un fallback per la proprietà del confine sarà simile a:
a border: var (- link-border, 1px punteggiato marrone);
Il secondo è che non è possibile utilizzare variabili come nomi di proprietà. Il seguente codice genererà un errore sulla seconda dichiarazione.
h1 --my-size: font-size; var (- my-size): 2em;
Con le nozioni di base, vediamo come possiamo costruire valori da proprietà personalizzate. Se hai assegnato un numero nudo a una variabile, non sarai in grado di aggiungerlo direttamente ad alcune unità per ottenere un valore valido. In breve, il seguente codice non è valido:
.quote --t-padding: 20; padding-top: var (- t-padding) px; // non funzionerà
Dovrai usare il Calc () funzione per eseguire alcuni calcoli e creare valori CSS finali. Per far funzionare il codice qui sopra, dovrai modificarlo in modo che assomigli:
.quote --t-padding: 20; padding-top: calc (var (- t-padding) * 1px); // Funzionerà
Non sei limitato a solo px unità. Puoi utilizzare tutte le unità valide disponibili in CSS.
Le variabili CSS native possono anche interagire con JavaScript. Per ottenere i loro valori, puoi usare il seguente codice:
Accentsconagua
var styles = getComputedStyle (document.documentElement); var bgValue = String (styles.getPropertyValue ('- background')). trim ();Il trim () rimuoverà lo spazio bianco da entrambe le estremità del tuo valore.
Se si desidera impostare il valore di una proprietà personalizzata, sarà necessario utilizzare il setProperty () metodo.
document.documentElement.style.setProperty ('- background', 'black');Il --sfondo la variabile ora è nera. È inoltre possibile impostare una proprietà personalizzata per fare riferimento a un'altra utilizzando il var () funzione.
document.documentElement.style.setProperty ('- h-color', 'var (- p-color)');L'affermazione sopra è completamente valida e imposta il valore di --h-color uguale a --p-color.
Le variabili possono fornire molta flessibilità quando si tratta di cambiare temi in base alle preferenze dell'utente. In precedenza, era necessario utilizzare lo stile in linea o creare più fogli di stile. Entrambi questi metodi hanno i loro demeriti. La creazione di più fogli di stile è un problema, e l'utilizzo di stili in linea è una cattiva pratica. Le variabili possono fornire una facile via d'uscita in questa situazione. Ecco alcuni JavaScript di base per cambiare i temi in modo dinamico:
document.getElementById ("greenish"). addEventListener ("click", greenTheme); function greenTheme () var greenShades = document.documentElement.style; greenShades.setProperty ('- theme-font', 'Dosis'); greenShades.setProperty ('- heading-background', 'hsl (90, 70%, 60%)'); // Imposta più valori simili Il codice sopra attribuisce un evento click al nostro pulsante tema. Non appena qualcuno fa clic su di esso, la funzione greenTheme () imposta i valori di alcune variabili per modificare l'aspetto generale del sito web. Come puoi vedere, questo metodo è stato molto più semplice da implementare rispetto alle altre due soluzioni.
Puoi provare ad aggiungere qualche altra variabile o creare più temi in questa demo di CodePen.
Il tutorial potrebbe suggerire che le variabili CSS native siano superiori alle variabili nei preprocessori come Sass, ma non sto affatto minando l'utilità dei preprocessori. L'utilizzo di vari preprocessori CSS aumenta la produttività. Hanno molto più da offrire rispetto alle sole variabili. Numerose funzioni integrate, cicli e istruzioni condizionali possono eseguire rapidamente le operazioni.
Questo tutorial fa semplicemente notare che anche se le variabili native hanno una sintassi strana, hanno ancora molto da offrire e valgono la pena di essere utilizzate nei tuoi progetti. Se hai domande su questo tutorial, fammelo sapere nei commenti.
