Una delle caratteristiche che più di tutte rende LESS un motore di CSS veramente potente è la capacità di creare mixin. Un mixin è un contenitore di proprietà CSS preimpostate che possiamo riutilizzare nelle nostre classi CSS. Ad esempio, se vogliamo che intestazione e piè di pagina di un documento abbiano lo stesso margin e padding, possiamo creare un mixin che imposta queste proprietà e poi negli stili dei tag header e footer referenziare il mixin.
Nel codice sottostante possiamo vedere un esempio di mixin e del suo utilizzo.
.margins { margin: 5px; padding: 10px; } #header { .margins; } #footer { .margins; }
Come si può intuire dal codice, un mixin è dichiarato come una normale classe CSS e utilizzato come se fosse una proprietà CSS. Una volta compilato, il codice LESS genera il seguente CSS di output.
#header { margin: 5px; padding: 10px; } #footer { margin: 5px; padding: 10px; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Limitare le richieste lato server con l'interactive routing di Blazor 8
Eseguire operazioni sui blob con Azure Storage Actions
Paginare i risultati con QuickGrid in Blazor
Assegnare un valore di default a un parametro di una lambda in C#
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Utilizzare Tailwind CSS all'interno di React: primi componenti
Eseguire le GitHub Actions offline
Sfruttare al massimo i topic space di Event Grid MQTT
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Gestire liste di tipi semplici con Entity Framework Core