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
Mappare una complex property di una entity su un campo JSON
Running workloads and operations with Azure Kubernetes Service
Breaking the Legacy Barrier: how to Use AI to Modernize Applications
Utilizzo delle Feature flag in ASP.NET Core
Integrare Agenti A2A in Azure API Management
Gestire gli errori nelle Promise JavaScript con try()
Blazor e Static Web Assets in .NET 10
Ottimizzare la content-visibility in CSS specificando lo spazio da occupato dall'area non renderizzata
Nuova modale riconnessione Blazor
Configurare OpenTelemetry per Application Insights su ASP.NET Core
Utilizzare il Null conditional assignment di C# 14
I più letti di oggi
- Sei Security? Da oggi te lo diciamo noi!
- ASP.NET Razor: la sintassi di base
- Visualizzare proprietà con contenuto HTML con ASP.NET Razor
- Tutorial Entity Framework 6
- Impostare il focus su un controllo in Blazor tramite JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestire l'edit di collection di dati in ASP.NET MVC


