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
Eseguire operazioni sui blob con Azure Storage Actions
Utilizzare il nuovo modello GPT-4o con Azure OpenAI
Applicare un filtro per recuperare alcune issue di GitHub
Utilizzare Tailwind CSS all'interno di React: primi componenti
Miglioramenti agli screen reader e al contrasto in Angular
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Le novità di Angular: i miglioramenti alla CLI
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core
Sostituire la GitHub Action di login su private registry
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Utilizzare Tailwind CSS all'interno di React: installazione