Uno degli aspetti più interessanti di LESS risiede nel fatto che, come abbiamo visto negli script precedenti dedicati all'argomento, diventa semplice includere vero e proprio scripting all'interno dei CSS.
In questo esempio vedremo come gestire il caso in cui negli elementi sia necessario aggiungere valori che sono calcolati in seguito ad operazioni, ad esempio per fare in modo che un colore o una dimensione vengano variati in base al valore contenuto in una variabile.
Prendiamo questo esempio:
@width: 100px; @background: hsl(530, 80%, 50%); #div-a { background: @background; width: @width; color: (@background/130); } #div-b { /* trasparente al 25%, più scuro del 10% */ background: fade(darken(@background, 10%), 25%); width: (@width+100); }
Il CSS risultante sarà questo:
##div-a { background: #19e6c4; width: 100px; color: #000202; } #div-b { /* più trasparente del 10%, più scuro del 25% */ background: rgba(20, 184, 156, 0.25); width: 200px; }
Maggiori informazioni sulle funzioni applicabili ai colori sono disponibili nella documentazione:
http://lesscss.org/#reference
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Managed deployment strategy in Azure DevOps
Combinare Container Queries e Media Queries
Il nuovo controllo Range di Blazor 9
Ridurre il reflow ottimizzando il CSS
Utilizzare Locust con Azure Load Testing
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Utilizzare WhenEach per processare i risultati di una lista di task
Utilizzare Container Queries nominali
Esporre i propri servizi applicativi con Semantic Kernel e ASP.NET Web API
Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
I più letti di oggi
- Analizzare il contenuto di una issue con GitHub Models e AI
- Integrare OpenAI tramite Aspire
- Usare la libreria PredicateBuilder per eseguire query tramite Entity Framework che usano or su più campi
- The Agentic Day - Milano
- .NET Conference Italia 2025 - Milano
- Gestione delle scrollbar dinamiche in HTML e CSS