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
Creare una libreria CSS universale: i bottoni
Ottimizzazione dei block template in Angular 17
Eseguire operazioni sui blob con Azure Storage Actions
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Bloccare l'esecuzione di un pod in mancanza di un'artifact attestation di GitHub
Estrarre dati randomici da una lista di oggetti in C#
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Creare una libreria CSS universale: Immagini
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Creare una custom property in GitHub