Le variabili CSS sono una moderna specifica CSS che è alla base di qualsiasi applicazione Web, poiché sono l’elemento costitutivo di base delle applicazioni basate sui dati. Attraverso le variabili, possiamo ridurre i tempi di codifica e manutenzione, consentendo agli sviluppatori web di sviluppare applicazioni software compatibili tra browser diversi. Utilizzando le variabili, i programmatori riducono le attività ripetitive e memorizzano i valori che possono essere utilizzati per tutta la durata dell’applicazione o dell’istanza del browser. In passato, questo era possibile solo con SaSS (fogli di stile semplicemente fantastici) o preprocessori LESS.
Cosa sono le variabili CSS?
Le variabili CSS sono proprietà personalizzate in cui gli sviluppatori web possono memorizzare valori, che, a loro volta, possono essere utilizzati ovunque sul tuo sito web. A differenza dei linguaggi di programmazione che supportano una semplice sintassi di inizializzazione e sostituzione, le variabili CSS devono essere definite in modo specifico se vengono inizializzate o sostituite, utilizzando sintassi diverse. L’inizializzazione di una variabile avviene anteponendo “–” al nome della variabile. Ad esempio, la seguente sintassi inizializza la variabile Colore principale a grigio:
--main-color: gray
Può essere utilizzato ovunque all’interno del codice con il valore specificato. Se vogliamo sostituire la proprietà della variabile, utilizziamo la proprietà CSS chiamata var():
color: var(- main-color)
Leggere: Utilizzo di Angular per leggere le variabili Sass
CSS var() Funzione
Il var() La funzione viene utilizzata per aggiungere valore a una variabile CSS. Le variabili CSS possono essere create globalmente o localmente e sono molto utili quando le usi come parte della progettazione di applicazioni web. Invece di cambiare sempre i colori, puoi inserire i valori dei colori nelle variabili e chiamarli quando necessario, ottimizzando notevolmente i tuoi contenuti.
Il CSS var() la sintassi della funzione è la seguente:
var(--name, value)
Ecco un esempio più concreto di come utilizzare il var() funzione in CSS e HTML:
<!DOCTYPE html> <html> <head> <style> .content, div { padding: 8px; display: auto; border: none; border-radius: 15px; } div { margin: 12px; } :root { --yellow: #ffc300; --purple: #c83349; --blue: #36486b; --white: #ffffff; --light-grey: #d3d3d3; --border-yellow: 1px solid var(--yellow); --border-purple: 1px solid var(--purple); --border-blue: 1px solid var(--blue); } .content { background-color: var(--light-grey); } .box-1 { border: var(--border-yellow); color: var(--yellow); background-color: var(--white); border-radius: 15px; } .box-2 { border: var(--border-purple); color: var(--purple); background-color: var(--white); border-radius: 15px; } .box-3 { border: var(--border-blue); color: var(--blue); background-color: var(--white); border-radius: 15px; } .box-1 button { background-color: var(--yellow); color: var(--white); } .box-2 button { background-color: var(--purple); color: var(--white); } .box-3 button { background-color: var(--blue); color: var(--white); } button { border-radius: 15px; border: none; } </style> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Var() function</title> </head> <body> <div class="content"> <div class="box-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut feugiat urna. Sed sit amet elementum tortor. Mauris sed nisi congue purus dignissim lobortis.</p> <button type="button">Click here!</button> </div> <div class="box-2"> <p class="second">Nulla molestie posuere nisl, nec sodales felis lacinia eu. Praesent erat massa, scelerisque quis ex sit amet, rutrum varius enim.</p> <button type="button">Click here!</button> </div> <div class="box-3"> <p class="third">Curabitur pretium tortor sollicitudin lectus vulputate interdum eget vitae quam. Morbi tincidunt eleifend porttitor.</p> <button type="button">Click here!</button> </div> </div> </body> </html>
Leggere: Verifica del vuoto delle variabili con JavaScript
Che cos’è l’ambito nelle variabili CSS?
Esistono due tipi di ambito che una variabile può avere nei CSS. Loro sono:
-
- Ambito globale: Per creare una variabile di ambito globale, devi dichiararla in :selettore radice o il selettore corrispondente all’elemento radice del documento. Una volta dichiarata la variabile, è possibile accedervi dall’inizio alla fine del documento.
- Ambito locale: per creare una variabile di ambito locale, è necessario dichiararla all’interno del selettore che la utilizzerà.
Una breve nota sull’ereditarietà delle variabili CSS: il valore di un elemento viene ereditato dal genitore o se non viene impostato alcun valore per una proprietà personalizzata di un particolare elemento.
Leggere: Una guida all’ambito delle variabili CSS
Come modificare i valori delle variabili con JavaScript
Uno dei punti più interessanti per gli sviluppatori web che usano JavaScript è che le variabili CSS possono essere manipolate e gestite attraverso questo linguaggio di scripting. Per utilizzare le variabili in CSS tramite JavaScript, il loro valore si ottiene in modo simile a come JavaScript gestisce altre proprietà. Diamo un’occhiata a un esempio che mostra come modificare le variabili CSS con JavaScript:
<!DOCTYPE html> <html> <head> <style> .content, div { padding: 8px; display: auto; border: none; border-radius: 15px; } div { margin: 12px; } :root { --yellow: #ffc300; --purple: #c83349; --blue: #36486b; --white: #ffffff; --light-grey: #d3d3d3; --border-yellow: 1px solid var(--yellow); --border-purple: 1px solid var(--purple); --border-blue: 1px solid var(--blue); } .content { background-color: var(--light-grey); } .box-1 { border: var(--border-yellow); color: var(--yellow); background-color: var(--white); border-radius: 15px; } .box-2 { border: var(--border-purple); color: var(--purple); background-color: var(--white); border-radius: 15px; } .box-3 { border: var(--border-blue); color: var(--blue); background-color: var(--white); border-radius: 15px; } .box-1 button { background-color: var(--yellow); color: var(--white); } .box-2 button { background-color: var(--purple); color: var(--white); } .box-3 button { background-color: var(--blue); color: var(--white); } button { border-radius: 15px; border: none; font-color: white; } </style> <script> var rt = document.querySelector(":root"); function change_color() { rt.style.setProperty("--light-grey", "lightblue"); } </script> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Var() function</title> </head> <body> <h3>Change CSS variable through JavaScript</h3> <div class="content"> <div class="box-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut feugiat urna. Sed sit amet elementum tortor. Mauris sed nisi congue purus dignissim lobortis.</p> <button type="button">Click here!</button> </div> <div class="box-2"> <p class="second">Nulla molestie posuere nisl, nec sodales felis lacinia eu. Praesent erat massa, scelerisque quis ex sit amet, rutrum varius enim.</p> <button type="button">Click here!</button> </div> <div class="box-3"> <p class="third">Curabitur pretium tortor sollicitudin lectus vulputate interdum eget vitae quam. Morbi tincidunt eleifend porttitor.</p> <button type="button">Click here!</button> </div> <button type="button" onclick=" change_color()">Change variables with JavaScript</button> </div> </body> </html>
Nell’esempio sopra, abbiamo memorizzato il file selettore: radice in una variabile, quindi ha creato una funzione denominata cambia colore() e, attraverso di esso, ha cambiato il colore di sfondo esistente con uno nuovo.
Leggere: Funzioni matematiche nei CSS
Come utilizzare le variabili CSS nelle query multimediali
Ora ti mostreremo come modificare il valore di una variabile CSS in una query multimediale. Media query si riferisce all’impostazione di regole di stile per dispositivi diversi, come tablet, telefoni cellulari e dimensioni dello schermo diverse:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Variabiles CSS in media query</title> <style> :root { --light-grey: #d3d3d3; --white: #ffffff; } .box { --fontsize: 15px; } body { background-color: var(--light-grey); } .box { color: var(--light-grey); background-color: var(--white); padding: 25px; font-size: var(--fontsize); } @media screen and (min-width: 481px) { .box { --fontsize: 35px; } } </style> </head> <body> <h3 style="color: white;">Using variables CSS in media queries</h3> <div class="box"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo, lorem vitae mollis tincidunt, turpis sapien vehicula metus, sit amet hendrerit dui neque sit amet velit. Mauris id purus quis nibh convallis bibendum. Sed in ex ac dolor ornare consequat ac at leo. Duis tempor leo eleifend aliquet dignissim. Sed imperdiet lectus ut ultricies pretium. </p> </div> </body> </html>
Nell’esempio sopra, se la larghezza del browser è inferiore a 481px, la dimensione del carattere diventa 15px. Quando la dimensione è maggiore di 481px, la dimensione del carattere cambia in 35px.
Considerazioni finali sulle variabili CSS
Le variabili CSS sono molto utili per gestire e organizzare grandi o piccole quantità di CSS, ridurre la duplicazione del codice, eliminare l’uso di preprocessori, avere la possibilità di poter essere dichiarati ovunque e prevenire errori. Offrono la possibilità di definire la stessa proprietà a diversi livelli di specificità, rendendo molto più facile il lavoro per gli sviluppatori Web e rendendo il codice più facile da leggere e comprendere.
Per saperne di più Tutorial di programmazione CSS e sviluppo web.