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
Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
Applicare un filtro per recuperare alcune issue di GitHub
Referenziare un @layer più alto in CSS
Ridurre il reflow ottimizzando il CSS
Definire il colore di una scrollbar HTML tramite CSS
Creare una libreria CSS universale: Cards
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Integrare modelli AI in un workflow di GitHub
Rendere le variabili read-only in una pipeline di Azure DevOps
Gestione delle scrollbar dinamiche in HTML e CSS
Creare una libreria CSS universale: Nav menu
Gestire progetti NPM in .NET Aspire
I più letti di oggi
- Integrare OpenAI tramite Aspire
- Interagire con Azure DevOps tramite MCP Server
- Creare un agente A2Acon Azure Logic Apps
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- The Agentic Day - Milano
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!