2.1 Dichiarare le CSS-variabili
Le CSS-variabili, conosciute anche come Custom Properties, permettono di definire valori che possono essere riutilizzati in diverse parti del codice CSS. Rendono la gestione degli stili molto più semplice e flessibile.
Le CSS-variabili si dichiarano con un doppio trattino (--) e possono essere definite in qualsiasi selettore. Tuttavia, per assicurare l'accessibilità delle variabili in tutto il documento, spesso vengono definite nel selettore radice :root.
Sintassi:
selettore {
--nome-variabile: valore;
}
Esempio:
In questo esempio sono dichiarate quattro variabili: --main-bg-color, --main-text-color, --primary-color, e --font-size.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
Usare le CSS-variabili
Per utilizzare il valore di una variabile si usa la funzione var(), che prende il nome della variabile come argomento.
Sintassi:
selettore {
proprietà: var(--nome-variabile);
}
Esempio:
In questo esempio i valori delle variabili vengono usati per definire il colore di sfondo, il colore del testo, la dimensione del font e il colore dei link.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 Esempi di utilizzo delle CSS-variabili
Esempio 1: Uso base delle variabili
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
<body>
<p>Questo è un paragrafo con un link a <a href="#">Example.com</a>.</p>
</body>
Risultato:
- Lo sfondo della pagina sarà grigio chiaro
- Il testo sarà grigio scuro
- La dimensione del font sarà di 16 pixel
- I link saranno di colore blu
Esempio 2: Sovrascrivere variabili in singoli componenti
Le CSS-variabili possono essere sovrascritte per singoli elementi o componenti, fornendo flessibilità nella stilizzazione:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* Sovrascrittura di variabile */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>Questo è l'header.</p>
</div>
<div class="footer">
<p>Questo è il footer.</p>
</div>
Risultato:
- Lo sfondo dell'header sarà blu, mentre il testo sarà grigio chiaro
- Lo sfondo del footer sarà rosso (variabile sovrascritta), mentre il testo sarà grigio chiaro
Esempio 3: Uso delle variabili in combinazione con altri valori
Le CSS-variabili possono essere combinate con altri valori e funzioni CSS:
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>Questo è un container con padding e margin.</p>
</div>
Risultato:
- Il container avrà padding e margin definiti dalle variabili
2.3 Uso delle CSS-variabili in JavaScript
Esempio di uso delle CSS-variabili in JavaScript
Le CSS-variabili possono essere modificate dinamicamente usando JavaScript, permettendo di adattare gli stili in tempo reale:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>Questo è un paragrafo.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
Spiegazione:
Premendo il pulsante, i valori delle variabili --bg-color e --text-color cambiano, portando a un cambiamento di colore di sfondo e testo sulla pagina.
GO TO FULL VERSION