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
Recuperare l'ultima versione di una release di GitHub
Simulare Azure Cosmos DB in locale con Docker
Creare una libreria CSS universale: Cards
Eseguire query in contemporanea con EF
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Managed deployment strategy in Azure DevOps
Introduzione alle Container Queries
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Configurare e gestire sidecar container in Azure App Service
Fornire parametri ad un Web component HTML
Gestione dell'annidamento delle regole dei layer in CSS
Migliorare l'organizzazione delle risorse con Azure Policy