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
Effettuare un clone parziale di un repository di GitHub
Esporre un server MCP esistente con Azure API Management
Importare un servizio esterno in .NET Aspire
Gestire il routing HTTP in Azure Container App
Gestire gli errori nelle Promise JavaScript con try()
Ridimensionamento automatico input tramite CSS
Ricevere notifiche sui test con Azure Load Testing
Impostare automaticamente l'altezza del font tramite CSS
Gestire pubblicazione Kubernetes tramite .NET Aspire
Recuperare gli audit log in Azure DevOps
Configurare OpenAI in .NET Aspire
Controllare la telemetria con .NET Aspire
I più letti di oggi
- Effettuare il multi-checkout in linea nelle pipeline di Azure DevOps
- Sfruttare una CDN con i bundle di ASP.NET
- Esaminare documenti XML con namespace utilizzando LINQ to XML
- Alleggerire le applicazioni WPF sfruttando gli oggetti Freezable
- Effetto turnstile su tutte le pagine con il Windows Phone Toolkit
- Le DirectInk API nella Universal Windows Platform
- Gli oggetti CallOut di Expression Blend 4.0
- Inserire le news di Punto Informatico nel proprio sito


