Nello script #82 abbiamo vosto come creare uno stile (o mixin) e poi riutilizzarlo all'interno di altri stili. In quello script abbiamo utilizzato delle proprietà CSS statiche, ma con LESS possiamo creare anche mixin parametrici ovvero dove i valori delle proprietà CSS è deciso dall'utilizzatore del mixin.
Per fare questo dobbiamo dichiarare i parametri di input del mixin circondandoli con parentesi tonde ('(' e ')') e dividendoli con un punto e virgola ';'. Chi utilizza il mixin deve passare i parametri sempre circondandoli con parentesi tonde e separandoli con punto e virgola. Per fare un esempio pratico, se vogliamo impostare margin e padding a valori differenti per i tag HTML header e footer possiamo fare una cosa del genere:
.margins(@margin; @padding) { margin: @margin; padding: @padding; } header { .margins(5px; 10px); } footer { .margins(2px; 5px); }
Il CSS prodotto da questo script LESS è il seguente:
header { margin: 5px; padding: 10px; } footer { margin: 2px; padding: 5px; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire il routing HTTP in Azure Container App
Creare una libreria CSS universale: Nav menu
Recuperare App Service cancellati su Azure
Gestire progetti NPM in .NET Aspire
Utilizzare WebJobs su Linux con Azure App Service
Bloccare l'esecuzione di un pod in mancanza di un'artifact attestation di GitHub
Il nuovo controllo Range di Blazor 9
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Recuperare l'ultima versione di una release di GitHub
Introduzione ai web component HTML
.NET Aspire per applicazioni distribuite
Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database
I più letti di oggi
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!