1.1 Che cosa sono le variabili CSS?
Le variabili CSS, conosciute anche come custom properties, sono variabili dichiarate in CSS che puoi usare per memorizzare valori come colori, dimensioni, font e altri attributi CSS. Offrono un modo efficiente per migliorare la flessibilità e la manutenibilità degli stili sulle pagine web.
Che cosa sono le variabili CSS?
Le variabili CSS sono variabili che possono memorizzare i valori delle proprietà CSS e essere riutilizzate in diverse parti degli stili. Si definiscono utilizzando il doppio trattino (--), e le puoi impostare in qualsiasi selettore, ma di solito vengono definite nel selettore radice :root per renderle disponibili ovunque nel documento.
Esempio:
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
Caratteristiche principali delle variabili CSS:
- Riutilizzo: Le variabili CSS permettono di definire un valore una sola volta e usarlo ripetutamente in diverse parti del codice CSS. Aiuta a evitare la duplicazione e semplifica la gestione degli stili.
- Flessibilità: i valori delle variabili CSS possono cambiare in base a condizioni come lo stato di un elemento o le media queries. Questo consente di creare stili più adattivi e dinamici.
- Ereditarietà: le variabili CSS ereditano dai loro elementi genitori a quelli figli, il che semplifica la gestione e l'organizzazione degli stili.
- Gestibilità: L'uso delle variabili semplifica la manutenzione del codice, perché i cambiamenti dei valori delle variabili si riflettono automaticamente su tutti gli elementi che le usano.
1.2 Esempi di utilizzo delle variabili CSS
Esempio di utilizzo delle variabili CSS in JavaScript:
document.documentElement.style.setProperty('--main-color', '#e74c3c');
Esempio 1: Definizione e utilizzo delle variabili
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
<body>
<p>Questo è un paragrafo.</p>
<a href="#">Questo è un link</a>
</body>
Spiegazione:
- In questo esempio sono definite tre variabili:
--main-bg-color,--main-text-colore--primary-color - Queste variabili sono usate per impostare il colore di sfondo, del testo e dei link
1.3 Cambiare i valori delle variabili in JavaScript
In questo esempio, le variabili sono usate per definire il tema della pagina. Premendo un pulsante, i valori delle variabili cambiano, modificando così lo sfondo e il colore del testo:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
<button id="toggle-theme">Cambia Tema</button>
<p>Questo è un paragrafo.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION