Abbiamo già affrontato LESS in alcuni script precedenti e abbiamo visto come, di fatto, consenta di produrre file CSS contando sull'aiuto di scripting.
Tre la caratteristiche interessanti di LESS c'è la possibilità di impostare stili annidati con maggior semplicità, che poi saranno esplosi nei classici stili combinati di CSS.
Si prenda ad esempio questo stile di partenza:
#main { h1 { font: 20px; color: #f40000; } a { color: #f0f0f0; text-decoration: none; &:hover { color: #909090; } } }
Sarà automaticamente espanso in quello che segue, con risparmio di tempo e una maggior chiarezza durante la scrittura:
#main h1 { font: 20px; color: #f40000; } #main a { color: #f0f0f0; text-decoration: none; } #main a:hover { color: #909090; }
Di particolare interesse è l'uso del carattere &, che va utilizzato in corrispondenza delle pseudo-classi, come :hover.
Il risultato è quello di partire da un file più facilmente leggibile e che ricalca la struttura del DOM.
Lo stesso approccio può essere applicato anche alle media queries.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare un KeyedService di default in ASP.NET Core 8
Copiare automaticamente le secret tra più repository di GitHub
Definire lo stile CSS in base alle dimensioni del container
Gestione degli environment per il deploy con un workflow di GitHub
C# 12: Cosa c'è di nuovo e interessante
Sfruttare lo streaming di una chiamata Http da Blazor
Eseguire una query su SQL Azure tramite un workflow di GitHub
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Utilizzare database e servizi con gli add-on di Container App
Sfruttare al massimo i topic space di Event Grid MQTT
Short-circuiting della Pipeline in ASP.NET Core
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework