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
Forzare la lingua dell'interfaccia di Azure Active Directory B2C
Effettuare una chiamata HTTP in Angular usando le promise e RxJs 7
Dependency injection con Minimal API di ASP.NET Core
Supporto migliorato agli statement condizionali nelle pipeline di Azure DevOps
ASP.NET Core & Blazor 6
Come sono state modificate le checkbox nelle form di Bootstrap 5
Creare un form con Bootstrap 5
Calcolare automaticamente un numero di versione di un repository in una pipeline di Azure DevOps
Continuous Deployment tramite GitOps
Caricare immagini a differenti risoluzioni in HTML con srcset
Generare un QR Code da ASP.NET Web API
Log streaming di una Azure Container App