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
Escludere alcuni file da GitHub Secret Scanning
Gestire i dati con Azure Cosmos DB Data Explorer
Ottenere un token di accesso per una GitHub App
Utilizzare il metodo Index di LINQ per scorrere una lista sapendo anche l'indice dell'elemento
Utilizzare i variable font nel CSS
Gestione degli stili CSS con le regole @layer
Referenziare un @layer più alto in CSS
Cambiare la chiave di partizionamento di Azure Cosmos DB
Fornire parametri ad un Web component HTML
Utilizzare l nesting nativo dei CSS
Eseguire script pre e post esecuzione di un workflow di GitHub
Ordine e importanza per @layer in CSS