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 la cancellazione di una richiesta in streaming da Blazor
Utilizzare il nuovo modello GPT-4o con Azure OpenAI
Gestire il colore CSS con HWB
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Utilizzare il metodo IntersectBy per eseguire l'intersection di due liste
Eseguire script pre e post esecuzione di un workflow di GitHub
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Il nuovo controllo Range di Blazor 9
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Introduzione alle Container Queries
Fornire parametri ad un Web component HTML
Rendere i propri workflow e le GitHub Action utilizzate più sicure