La sintassi CSS è stata sempre molto minimale e questo non ha mai permesso di renderli manutenibili. Questa immanutenibilità alla lunga ha portato alla creazione di linguaggi basati su CSS, ma più evoluti come LESS e SASS che aggiungono molte funzionalità tra le quali quella di permettere la creazione di variabili riutilizzabili. Tuttavia, nelle ultime specifiche CSS questa funzionalità è stata aggiunta nativamente.
Adesso possiamo dichiarare una variabile all'interno del file dichiarandola all'interno di un selettore tramite la sintassi --nomevariabile. Successivamente possiamo utilizzarla all'interno di un altro selettore usando la parola chiave var come mostrato nell'esempio.
:root { --main-bg-color: #fff; --main-txt-color: #000; } .container { background-color: var(--main-bg-color); color: var(--main-txt-color); }
In questo esempio definiamo le variabili main-bg-color e main-txt-color che definiscono rispettivamente il colore bianco e nero. successivamente le usiamo per impostare il colore di background e il colore del teto degli oggetti con classe container.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Cambiare la chiave di partizionamento di Azure Cosmos DB
Sfruttare al massimo i topic space di Event Grid MQTT
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Evitare la command injection in un workflow di GitHub
Utilizzare la libreria Benchmark.NET per misurare le performance
Usare le collection expression per inizializzare una lista di oggetti in C#
Effettuare il binding di date in Blazor
Utilizzare la session affinity con Azure Container Apps
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Utilizzare database e servizi con gli add-on di Container App
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Utilizzare politiche di resiliency con Azure Container App