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
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Effettuare il binding di date in Blazor
Cambiare la chiave di partizionamento di Azure Cosmos DB
Eseguire una query su SQL Azure tramite un workflow di GitHub
Usare le collection expression per inizializzare una lista di oggetti in C#
Creare una libreria CSS universale: Cards
Utilizzare Copilot con Azure Cosmos DB
Utilizzare Azure AI Studio per testare i modelli AI
Referenziare un @layer più alto in CSS
Utilizzare Model as a Service su Microsoft Azure
Utilizzare i primary constructor in C#
Generare la software bill of material (SBOM) in GitHub