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
Creare una libreria CSS universale: Nav menu
Gestione dell'annidamento delle regole dei layer in CSS
Creare una libreria CSS universale: Immagini
Gestione dei nomi con le regole @layer in CSS
Combinare Container Queries e Media Queries
Utilizzare i variable font nel CSS
Ordine e importanza per @layer in CSS
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Scrivere selettori CSS più semplici ed efficienti con :is()
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Utilizzare una qualunque lista per i parametri di tipo params in C#
I più letti di oggi
- The Agentic Day - Milano
- Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
- .NET Conference Italia 2025 - Milano
- Assengare l'ID ai controlli in maniera automatica
- Gestione CSS in Blazor con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestione file Javascript in Blazor con .NET 9