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
Utilizzare database e servizi con gli add-on di Container App
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Load test di ASP.NET Core con k6
Utilizzare Tailwind CSS all'interno di React: primi componenti
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Generare file per il download da Blazor WebAssembly
Reactive form tipizzati con modellazione del FormBuilder in Angular
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Gestire liste di tipi semplici con Entity Framework Core
Come migrare da una form non tipizzata a una form tipizzata in Angular
Sostituire la GitHub Action di login su private registry
Gestire errori funzionali tramite exception in ASP.NET Core Web API